Have MMW running locally. Open this page. Hover over the map to highlight UTFGrid blocks.
Pieced together with ideas from:
Last active
February 18, 2019 23:05
-
-
Save rajadain/82c73e2c2a7c2865e6bc9bb05a88373f to your computer and use it in GitHub Desktop.
MMW UtfGrid Visualizer
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" | |
| crossorigin="" /> | |
| <!-- Make sure you put this AFTER Leaflet's CSS --> | |
| <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" | |
| crossorigin=""></script> | |
| <script src="https://unpkg.com/[email protected]/L.UTFGrid-min.js"></script> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 0 | |
| } | |
| #map { | |
| height: 100%; | |
| background-color: pink; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map" /> | |
| <script src="./index.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const MAP_CENTER = [39.9614307, -75.1542379]; | |
| const GRIDTYPE = 'county'; | |
| const UTFGRID_URL = `http://33.33.34.35/${GRIDTYPE}/{z}/{x}/{y}.grid.json`; | |
| const InfoBox = L.Control.extend({ | |
| options: { | |
| position: "topleft", | |
| label: "" | |
| }, | |
| onAdd: function (map) { | |
| this._container = L.DomUtil.create("div", "info"); | |
| L.DomUtil.create("h3", "", this._container).innerHTML = this.options.label; | |
| this._div = L.DomUtil.create("div", "", this._container); | |
| this.update(); | |
| return this._container; | |
| }, | |
| update: function (text) { | |
| if (text == null) { | |
| text = "<h4>Hover over something</h4>"; | |
| } | |
| this._div.innerHTML = "<h4>" + text + "</h4>"; | |
| } | |
| }); | |
| const lMap = L.map("map", { | |
| minZoom: 4, | |
| maxZoom: 12, | |
| }).setView(MAP_CENTER, 12); | |
| L.tileLayer("//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { | |
| attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' | |
| }).addTo(lMap); | |
| const utfgrid = L.utfGridCanvas(UTFGRID_URL, { | |
| idField: "id", | |
| buildIndex: true, | |
| // fillColor: "black", | |
| // shadowBlur: 2, | |
| // shadowColor: "black", | |
| debug: true | |
| }).addTo(lMap); | |
| const infoBox = new InfoBox({ | |
| label: 'Canvas UTF8 Grid', | |
| }).addTo(lMap); | |
| utfgrid.on('mouseover', (e) => { | |
| if (!e.data) { | |
| return; | |
| } | |
| infoBox.update(`Hover: ${e.data.name}`); | |
| }); | |
| utfgrid.on('mouseout', () => { | |
| infoBox.update(); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment