diff --git a/leaflet_hybrid.html b/leaflet_hybrid.html
new file mode 100644
index 0000000..96532f1
--- /dev/null
+++ b/leaflet_hybrid.html
@@ -0,0 +1,95 @@
+
+
+
+ Leaflet Multi Polygons
+
+
+
+
+
+
+
+
+
+
diff --git a/leaflet_snippet.html b/leaflet_snippet.html
new file mode 100644
index 0000000..602d15b
--- /dev/null
+++ b/leaflet_snippet.html
@@ -0,0 +1,116 @@
+
+
+
+Leaflet Multi Polygons
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/leaflet_widget.js b/leaflet_widget.js
new file mode 100644
index 0000000..e9134eb
--- /dev/null
+++ b/leaflet_widget.js
@@ -0,0 +1,167 @@
+
+class LeafletElement extends HTMLElement {
+
+ constructor() {
+ super();
+ this.attachShadow({mode: 'open'});
+ this.content_div = document.createElement('div');
+ this.shadowRoot.appendChild(this.content_div);
+
+ this.link = document.createElement('link');
+ this.link.setAttribute("rel", "stylesheet");
+ this.link.setAttribute("href", "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css");
+ this.shadowRoot.appendChild(this.link);
+
+ //this.script = document.createElement('script');
+ //this.script.setAttribute("src", "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js");
+ //this.shadowRoot.appendChild(this.script);
+
+ //
+ //
+
+
+ this.slot_ele = document.createElement('slot');
+ this.shadowRoot.appendChild(this.slot_ele);
+ this.dot_text = "";
+ }
+
+ connectedCallback(){
+ let zoom = this.hasAttribute('zoom') ? this.getAttribute('zoom') : "11";
+ let style = this.hasAttribute('style') ? this.getAttribute('style') : "";
+ this.content_div.style = style;
+
+ async function search(name){
+ //let results = localStorage.getItem("https://nominatim.openstreetmap.org/search.php?q="+name+"&polygon_geojson=1&format=json");
+ //if(results){
+ // console.log("Use cache!");
+ // return JSON.parse(results);
+ //}
+ //else{
+ //console.log("Use fetch!");
+ let resp = await fetch("https://nominatim.openstreetmap.org/search.php?q="+name+"&polygon_geojson=1&format=json");
+
+ //what if negative resp?
+ //console.log(resp);
+
+ let results = await resp.json();
+ //console.log(results);
+
+ //localStorage.setItem("https://nominatim.openstreetmap.org/search.php?q="+name+"&polygon_geojson=1&format=json", JSON.stringify(results));
+ return results;
+ //}
+ }
+
+ function right_result(result){
+ return result.osm_type === "relation";
+ }
+
+ async function get_polygon(name){
+ let query = "https://nominatim.openstreetmap.org/search.php?q="+name+"&polygon_geojson=1&format=json";
+ let result = localStorage.getItem(query);
+ if(result){
+ console.log("Use cache!");
+ return JSON.parse(result);
+ }
+ else{
+ console.log("Use fetch!");
+ let results = await search(name);
+ let result = results.filter(right_result)[0];
+ console.log(result);
+ localStorage.setItem(query, JSON.stringify(result));
+ return result;
+ }
+ }
+
+ let that = this;
+ this.slot_ele.addEventListener('slotchange', async e => {
+ let spec = JSON.parse(that.innerText);
+
+ //alert(JSON.stringify(spec));
+
+ let polygons = {};
+ for(let k of Object.keys(spec.areas)){
+ //let results = await search(k);
+ //let result = results.filter(right_result)[0];
+
+ let result = await get_polygon(k);
+
+ //alert(typeof result);
+
+ polygons[k] = result;
+ }
+
+ //alert(JSON.stringify(polygons));
+
+ let mapOptions = {
+ //center: [52.6787254, 13.5881114],
+ //center: [Number(result.lat), Number(result.lon)],
+ center: [Number(polygons[spec.focus].lat), Number(polygons[spec.focus].lon)],
+ zoom
+ };
+
+ //let map = new L.map('map', mapOptions);
+ let map = new L.map(this.content_div, mapOptions);
+
+ let layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
+ map.addLayer(layer);
+
+ function switch_coords(poly){
+ return poly.map(t => [t[1], t[0]]);
+ }
+
+ for(let k of Object.keys(polygons)){
+ let result = polygons[k];
+
+ let latlang;
+ switch(result.geojson.type){
+ case "MultiPolygon":
+ latlang = [
+ ...result.geojson.coordinates[0].map(x => switch_coords(x))
+ ];
+ break;
+
+ case "Polygon":
+ latlang = [
+ ...[ switch_coords(result.geojson.coordinates[0]) ]
+ ];
+ break;
+ }
+
+ let multiPolygonOptions = {color: spec.areas[k], weight:2};
+ let multipolygon = L.multiPolygon(latlang , multiPolygonOptions);
+ multipolygon.addTo(map);
+ }
+ this.slot_ele.style.display = "none";
+ this.content_div.children[0].setAttribute("width", this.content_div.style.width);
+ this.content_div.children[0].setAttribute("height", this.content_div.style.height);
+ });
+ }
+
+ disconnectedCallback() {
+
+ }
+
+ attributeChangedCallback(name, oldValue, newValue) {
+ //this.displayVal.innerText = this.value;
+ }
+
+ get layout(){
+
+ }
+
+ set layout(x){
+
+ }
+
+ get value(){
+ //dot code
+ }
+
+ set value(x){
+
+ }
+
+}
+
+customElements.define('leaf-let', LeafletElement);
+
diff --git a/usage_examples.html b/usage_examples.html
new file mode 100644
index 0000000..ba7ebcf
--- /dev/null
+++ b/usage_examples.html
@@ -0,0 +1,28 @@
+
+
+
+ My Custom Viz-Element
+
+
+
+
+
+
+
+
+
+
+ {
+ "areas": {
+ "Potsdam": "blue",
+ "Erfurt": "yellow",
+ "Berlin": "red",
+ "Bernau": "orange"
+ },
+ "focus": "Berlin"
+ }
+
+
+
\ No newline at end of file