rajadain/README.md

## README.md

      
    Raw
  

              README.md
            
          
    MMW UtfGrid Visualizer

Instructions

Have MMW running locally. Open this page. Hover over the map to highlight UTFGrid blocks.
Credits

Pieced together with ideas from:

https://github.com/danzel/Leaflet.utfgrid
https://github.com/consbio/Leaflet.UTFGrid


## index.html
<html>

<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/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/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
        crossorigin=""></script>
    <script src="https://unpkg.com/leaflet-utfgrid@0.3.0/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>

## index.js
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: '&copy; <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();
});
	<html>

	<head>
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/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/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
	crossorigin=""></script>
	<script src="https://unpkg.com/leaflet-utfgrid@0.3.0/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>
	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();
	});