androidfanatic · June 18, 2019 09:01
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>plotrowsv1.mbtiles</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.1/mapbox-gl.css' rel='stylesheet' />
    <style>
      html, body, #map {width:100%; height:100%; margin:0; padding:0;}
      body {background: #fff;}
      #map {position:absolute;top:0;left:0;right:200px;bottom:0;}
      #layerList {position:absolute;top:5px;right:0;bottom:50%;width:190px;overflow:auto;}
      #layerList div {color:#333;}
      #layerList div div {width:15px;height:15px;display:inline-block;}
      #propertyList {position:absolute;top:50%;bottom:0;right:0;width:190px;overflow:auto;color:#000;}
      .mapboxgl-control-container div {z-index: 100;}
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="layerList"></div>
    <pre id="propertyList"></pre>
  <script>

 mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
 var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/satellite-streets-v11?optimize=true',
 });
 map.addControl(new mapboxgl.Navigation());

 function generateColor(str) {
  var rgb = [0, 0, 0];
  for (var i = 0; i < str.length; i++) {
      var v = str.charCodeAt(i);
      rgb[v % 3] = (rgb[i % 3] + (13*(v%13))) % 12;
  }
  var r = 4 + rgb[0];
  var g = 4 + rgb[1];
  var b = 4 + rgb[2];
  r = (r * 16) + r;
  g = (g * 16) + g;
  b = (b * 16) + b;
  return [r,g,b,1];
 };
 function initLayer(data) {
  var layer;
  var layerList = document.getElementById('layerList');
  var layers_ = [];
  data['vector_layers'].forEach(function(el) {
    var color = generateColor(el['id']);
    var colorText = 'rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',' + color[3] + ')';
    layers_.push({
      id: el['id'] + Math.random(),
      source: 'vector_layer_',
      'source-layer': el['id'],
      interactive: true,
      type: 'line',
      paint: {'line-color': colorText}
    });
    var item = document.createElement('div');
    item.innerHTML = '<div style="' +
      'background:rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',1);' +
      '"></div> ' + el['id'];
    layerList.appendChild(item);
  });
  var center = data['center'];
  if (typeof center == 'string') {
    center = center.split(',');
  }
  map.setStyle({
    version: 8,
    center: [parseFloat(center[0]), parseFloat(center[1])],
    zoom: parseInt(center[2], 10),
    sources: {
      'vector_layer_': {
        type: 'vector',
        tiles: data['tiles'],
        minzoom: data['minzoom'],
        maxzoom: data['maxzoom']
      }
    },
    layers: layers_
  });
  return layer;
 }

 var propertyList = document.getElementById('propertyList');
 map.on('mousemove', function(e) {
  propertyList.innerHTML = '';
  map.featuresAt(e.point, {radius: 3}, function(err, features) {
    if (err) throw err;
    if (features[0]) {
      propertyList.innerHTML = JSON.stringify(features[0].properties, null, 2);
    }
  });
 });

 var tileJSON = {"name":"plotrowsv1.mbtiles","description":"plotrowsv1.mbtiles","version":"2","minzoom":0,"maxzoom":20,"center":[-94.361744,44.560509,20],"bounds":[-94.365679,44.559648,-94.356513,44.562122],"type":"overlay","format":"pbf","generator":"tippecanoe v1.34.3","generator_options":"tippecanoe --force -o plotrowsv1.mbtiles -z22 plotrowsv1.json","basename":"3439rows","profile":"mercator","scale":1,"tiles":["http://52.42.219.204:8090/tileserver.php?/index.json%3f/%3f/index.json?/3439rows/{z}/{x}/{y}.pbf"],"tilejson":"2.0.0","scheme":"xyz","grids":["http://52.42.219.204:8090/tileserver.php?/index.json%3f/%3f/index.json?/3439rows/{z}/{x}/{y}.grid.json"],"vector_layers":[{"id":"plotrowsv1","description":"","minzoom":0,"maxzoom":20,"fields":{"id":"String"}}],"tilestats":{"layerCount":1,"layers":[{"layer":"plotrowsv1","count":32232,"geometry":"Polygon","attributeCount":1,"attributes":[{"attribute":"id","count":1000,"type":"string","values":["00012926-78e1-4c9a-816b-9a3d4fa283a5","00018645-e094-4aee-adcc-a1dc51c7d0a0","00020377-c799-4fc4-9430-51a5ac32f051","00022b92-f104-4b04-9f31-2c47e85168ec","00024d4b-df99-43a3-89f2-5b51ca47674e","000289d2-dbad-45e4-a9f3-5434d26d6943","0004dbc4-5a6a-4405-b169-4d18300cc327","000a3999-166a-45b9-a9ab-2e97e48b2e37","000cda68-2f1a-4580-a88e-696e5a3b8eae","000d1826-15d4-40fc-b178-653dca782b2e","0012f168-f045-43b6-80cb-f1869dc36fe6","001695d9-479e-4145-b221-49631f5959a1","00181509-11b0-4409-9933-a13aa04d09b5","001a427d-ca57-4cd3-a6bc-513f48e87cf7","001b0f7f-f703-41af-8533-517fdf02867a","001b3db5-fff7-4600-8371-e2fe7807bafe","001b654d-138b-46d6-99fd-4438b3a9005e","001d1ee5-c803-4755-9cd8-75c433ba1c68","001d7a98-0ad3-4f51-8927-ddc74846d979","00221ee1-0eb1-4e7c-b707-5c2145ffb402","0022e9f2-2cc7-4489-b2b3-5daa2ea86f07","0025363f-0082-4deb-bd9d-ec076b6c3070","00272b95-a396-492e-a983-edb535ea0581","0027a41c-8c0b-4906-a8b4-637b16428603","002bdea2-9bf6-44a3-b154-f09909399abf","002d030c-6cb9-4a44-93d7-55ef1894d806","0030b521-7e53-449c-ad65-98a7ccc3017c","0037d83b-20fc-4b77-89d5-3d366b298f29","0039dd99-fe24-451a-b2cf-350b204f05ce","003b3865-8237-4469-bbc3-d442c66a1357","003c9854-29b7-455e-9041-7961264728dc","003e47d1-bd9e-4b91-90c1-d99ff9fdb2e0","003fc132-413e-4e3f-989b-2056e416748c","003fdad2-dfc5-419c-9c25-e4bf39ae773d","00408d86-0b4b-444e-9853-bcf3c6cbf110","0040a21e-5149-4f7e-9c1c-0a51862aae78","0044a3b9-1b11-4be6-91ab-fb10c962b33f","0048b0ed-ab3f-4e3d-abfe-1a4f77b0d5d0","0049e144-de60-498a-9e99-b25432920d71","004a62b9-10ae-4acb-afe0-59c5c7f66e0f","004a802e-c3b9-4dc0-8c39-9838fa0f2dce","004a8fd4-a7b4-4f6e-b9ef-e646cd9e633f","004b042e-9c6e-4c33-bed7-d587857775f8","004d8fd8-4622-4f7d-b311-b4aabdb50048","004f1b42-caf8-416f-ae56-b9bc07e0be8e","0050e4b8-1d03-4cbd-a514-bbb859cfb1b3","00510345-28f3-4a35-b261-289e5fe8730d","0053340e-feb6-4164-8b36-591b6c6a96a2","00579df1-0986-4b2d-ab48-d72ec15d9f25","005819ea-919c-433e-95f6-e7954d27bd2b","005a1d01-8818-4ae5-9f0d-ec283ae7af01","005c57df-7bbe-4311-8811-21bd7651cb84","005f3537-b153-4785-b2d0-5483c5143bfe","00638b31-8d4a-4c74-8729-f7c6d448cb2d","0064d1fb-4f03-476a-bf70-c080cc6e25f8","0067225c-b913-4b7e-b0df-28ab167ab689","0067a3e2-4d5c-4ba4-b3dd-d1c56a48afd5","0067c4d7-442b-4bdb-b27e-a9ef06312113","006d5681-992c-4183-9e20-cfdfdf9ac0ad","006dfcaa-fcc2-4549-9382-f012818510ac","006eaf1c-7008-4d48-a359-9e4332387e6c","00723987-c5fa-40b4-8ef8-9a94cd3c2c62","00735dbc-a5ca-47c9-acae-55e7aba412d4","0074fa90-bc41-4eb1-8135-4e5de9cc8b20","00754bf7-ef9b-48a9-bf31-05537bbe71b8","0076d612-4da4-4a84-9060-69fdecd74e54","0077ab7f-d33c-47ba-b474-a212383334eb","00784a9e-7608-4fcd-8ea0-867a7e0023c3","0078b8f0-ca98-43b9-87a8-9ce8b7722296","007bcfa8-bfbc-4027-a462-a251b739ba90","0080392d-af04-4044-b67e-9b5b391428f6","0082f722-539f-4967-8c62-2b4d13dd2a7a","00874dbd-2047-447f-8200-c77f41b34035","008a9ccb-d463-4855-beb2-1a8f67f9ce90","008c7727-841e-4fa5-8c94-be5495286104","008cf532-18a8-47ba-938d-f0574784e859","008debcf-885c-43ef-ac07-7c5bea54034e","00922142-43b9-4238-b652-ba3d2655c9f2","00940391-2cce-4859-9e28-488a4be0cc9d","00944592-a491-41f3-b225-70409828a71d","009523d1-b9ba-413c-9db3-6ffe48410318","00969a0e-1d2d-48c1-b2a5-c19c8b4db250","0097eb7c-7d05-44d7-b0c3-87542f446998","00a190a8-ce0e-458f-b39c-e72c527377cb","00a1bc28-6ca1-4d39-b7f6-fb8a91e7e964","00a3fcc0-76c4-4d54-a83b-b52fe967bfda","00a53eb6-6bba-4f43-a9a4-7ca579316257","00a9216d-3b23-4b7f-a43b-526691b7b9be","00ac5ae5-5d95-420d-a46a-eb6fb3db7839","00ae471e-8cab-47f3-880c-e0ac5e20412c","00af5f24-bf2a-486e-82a7-5c57f0f0e982","00b22663-2f52-4c03-b83b-47ec41db3c8b","00b2c5f6-b79f-4d40-98d7-07eba7f8f7db","00b56f17-e8d9-4b03-a0b7-56e4ecaee6ac","00b65487-72a8-4c43-880e-9ce7c0b7adf9","00b6bfcb-0c40-4fbf-88bd-50655ce11937","00b80825-a2ed-48a6-af04-3657c738e037","00b87da9-af21-4219-b73a-84fc4e62ef5f","00ba75e8-3eb0-40ca-832c-3faf28e8ae89","00bb5be0-8df8-400d-aecf-bd7674b469fb"]}]}]},"zoom":10,"tileUrl":"http://52.42.219.204:8090/tileserver.php?/index.json%253f/%253f/index.json?/3439rows/20/249439/379002.pbf"};
 initLayer(tileJSON);

    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>plotrowsv1.mbtiles</title>
	<meta charset="utf-8"/>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.1/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.1/mapbox-gl.css' rel='stylesheet' />
	<style>
	html, body, #map {width:100%; height:100%; margin:0; padding:0;}
	body {background: #fff;}
	#map {position:absolute;top:0;left:0;right:200px;bottom:0;}
	#layerList {position:absolute;top:5px;right:0;bottom:50%;width:190px;overflow:auto;}
	#layerList div {color:#333;}
	#layerList div div {width:15px;height:15px;display:inline-block;}
	#propertyList {position:absolute;top:50%;bottom:0;right:0;width:190px;overflow:auto;color:#000;}
	.mapboxgl-control-container div {z-index: 100;}
	</style>
	</head>
	<body>
	<div id="map"></div>
	<div id="layerList"></div>
	<pre id="propertyList"></pre>
	<script>

	mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
	var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/satellite-streets-v11?optimize=true',
	});
	map.addControl(new mapboxgl.Navigation());

	function generateColor(str) {
	var rgb = [0, 0, 0];
	for (var i = 0; i < str.length; i++) {
	var v = str.charCodeAt(i);
	rgb[v % 3] = (rgb[i % 3] + (13*(v%13))) % 12;
	}
	var r = 4 + rgb[0];
	var g = 4 + rgb[1];
	var b = 4 + rgb[2];
	r = (r * 16) + r;
	g = (g * 16) + g;
	b = (b * 16) + b;
	return [r,g,b,1];
	};
	function initLayer(data) {
	var layer;
	var layerList = document.getElementById('layerList');
	var layers_ = [];
	data['vector_layers'].forEach(function(el) {
	var color = generateColor(el['id']);
	var colorText = 'rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',' + color[3] + ')';
	layers_.push({
	id: el['id'] + Math.random(),
	source: 'vector_layer_',
	'source-layer': el['id'],
	interactive: true,
	type: 'line',
	paint: {'line-color': colorText}
	});
	var item = document.createElement('div');
	item.innerHTML = '<div style="' +
	'background:rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',1);' +
	'"></div> ' + el['id'];
	layerList.appendChild(item);
	});
	var center = data['center'];
	if (typeof center == 'string') {
	center = center.split(',');
	}
	map.setStyle({
	version: 8,
	center: [parseFloat(center[0]), parseFloat(center[1])],
	zoom: parseInt(center[2], 10),
	sources: {
	'vector_layer_': {
	type: 'vector',
	tiles: data['tiles'],
	minzoom: data['minzoom'],
	maxzoom: data['maxzoom']
	}
	},
	layers: layers_
	});
	return layer;
	}

	var propertyList = document.getElementById('propertyList');
	map.on('mousemove', function(e) {
	propertyList.innerHTML = '';
	map.featuresAt(e.point, {radius: 3}, function(err, features) {
	if (err) throw err;
	if (features[0]) {
	propertyList.innerHTML = JSON.stringify(features[0].properties, null, 2);
	}
	});
	});

	var tileJSON = {"name":"plotrowsv1.mbtiles","description":"plotrowsv1.mbtiles","version":"2","minzoom":0,"maxzoom":20,"center":[-94.361744,44.560509,20],"bounds":[-94.365679,44.559648,-94.356513,44.562122],"type":"overlay","format":"pbf","generator":"tippecanoe v1.34.3","generator_options":"tippecanoe --force -o plotrowsv1.mbtiles -z22 plotrowsv1.json","basename":"3439rows","profile":"mercator","scale":1,"tiles":["http://52.42.219.204:8090/tileserver.php?/index.json%3f/%3f/index.json?/3439rows/{z}/{x}/{y}.pbf"],"tilejson":"2.0.0","scheme":"xyz","grids":["http://52.42.219.204:8090/tileserver.php?/index.json%3f/%3f/index.json?/3439rows/{z}/{x}/{y}.grid.json"],"vector_layers":[{"id":"plotrowsv1","description":"","minzoom":0,"maxzoom":20,"fields":{"id":"String"}}],"tilestats":{"layerCount":1,"layers":[{"layer":"plotrowsv1","count":32232,"geometry":"Polygon","attributeCount":1,"attributes":[{"attribute":"id","count":1000,"type":"string","values":["00012926-78e1-4c9a-816b-9a3d4fa283a5","00018645-e094-4aee-adcc-a1dc51c7d0a0","00020377-c799-4fc4-9430-51a5ac32f051","00022b92-f104-4b04-9f31-2c47e85168ec","00024d4b-df99-43a3-89f2-5b51ca47674e","000289d2-dbad-45e4-a9f3-5434d26d6943","0004dbc4-5a6a-4405-b169-4d18300cc327","000a3999-166a-45b9-a9ab-2e97e48b2e37","000cda68-2f1a-4580-a88e-696e5a3b8eae","000d1826-15d4-40fc-b178-653dca782b2e","0012f168-f045-43b6-80cb-f1869dc36fe6","001695d9-479e-4145-b221-49631f5959a1","00181509-11b0-4409-9933-a13aa04d09b5","001a427d-ca57-4cd3-a6bc-513f48e87cf7","001b0f7f-f703-41af-8533-517fdf02867a","001b3db5-fff7-4600-8371-e2fe7807bafe","001b654d-138b-46d6-99fd-4438b3a9005e","001d1ee5-c803-4755-9cd8-75c433ba1c68","001d7a98-0ad3-4f51-8927-ddc74846d979","00221ee1-0eb1-4e7c-b707-5c2145ffb402","0022e9f2-2cc7-4489-b2b3-5daa2ea86f07","0025363f-0082-4deb-bd9d-ec076b6c3070","00272b95-a396-492e-a983-edb535ea0581","0027a41c-8c0b-4906-a8b4-637b16428603","002bdea2-9bf6-44a3-b154-f09909399abf","002d030c-6cb9-4a44-93d7-55ef1894d806","0030b521-7e53-449c-ad65-98a7ccc3017c","0037d83b-20fc-4b77-89d5-3d366b298f29","0039dd99-fe24-451a-b2cf-350b204f05ce","003b3865-8237-4469-bbc3-d442c66a1357","003c9854-29b7-455e-9041-7961264728dc","003e47d1-bd9e-4b91-90c1-d99ff9fdb2e0","003fc132-413e-4e3f-989b-2056e416748c","003fdad2-dfc5-419c-9c25-e4bf39ae773d","00408d86-0b4b-444e-9853-bcf3c6cbf110","0040a21e-5149-4f7e-9c1c-0a51862aae78","0044a3b9-1b11-4be6-91ab-fb10c962b33f","0048b0ed-ab3f-4e3d-abfe-1a4f77b0d5d0","0049e144-de60-498a-9e99-b25432920d71","004a62b9-10ae-4acb-afe0-59c5c7f66e0f","004a802e-c3b9-4dc0-8c39-9838fa0f2dce","004a8fd4-a7b4-4f6e-b9ef-e646cd9e633f","004b042e-9c6e-4c33-bed7-d587857775f8","004d8fd8-4622-4f7d-b311-b4aabdb50048","004f1b42-caf8-416f-ae56-b9bc07e0be8e","0050e4b8-1d03-4cbd-a514-bbb859cfb1b3","00510345-28f3-4a35-b261-289e5fe8730d","0053340e-feb6-4164-8b36-591b6c6a96a2","00579df1-0986-4b2d-ab48-d72ec15d9f25","005819ea-919c-433e-95f6-e7954d27bd2b","005a1d01-8818-4ae5-9f0d-ec283ae7af01","005c57df-7bbe-4311-8811-21bd7651cb84","005f3537-b153-4785-b2d0-5483c5143bfe","00638b31-8d4a-4c74-8729-f7c6d448cb2d","0064d1fb-4f03-476a-bf70-c080cc6e25f8","0067225c-b913-4b7e-b0df-28ab167ab689","0067a3e2-4d5c-4ba4-b3dd-d1c56a48afd5","0067c4d7-442b-4bdb-b27e-a9ef06312113","006d5681-992c-4183-9e20-cfdfdf9ac0ad","006dfcaa-fcc2-4549-9382-f012818510ac","006eaf1c-7008-4d48-a359-9e4332387e6c","00723987-c5fa-40b4-8ef8-9a94cd3c2c62","00735dbc-a5ca-47c9-acae-55e7aba412d4","0074fa90-bc41-4eb1-8135-4e5de9cc8b20","00754bf7-ef9b-48a9-bf31-05537bbe71b8","0076d612-4da4-4a84-9060-69fdecd74e54","0077ab7f-d33c-47ba-b474-a212383334eb","00784a9e-7608-4fcd-8ea0-867a7e0023c3","0078b8f0-ca98-43b9-87a8-9ce8b7722296","007bcfa8-bfbc-4027-a462-a251b739ba90","0080392d-af04-4044-b67e-9b5b391428f6","0082f722-539f-4967-8c62-2b4d13dd2a7a","00874dbd-2047-447f-8200-c77f41b34035","008a9ccb-d463-4855-beb2-1a8f67f9ce90","008c7727-841e-4fa5-8c94-be5495286104","008cf532-18a8-47ba-938d-f0574784e859","008debcf-885c-43ef-ac07-7c5bea54034e","00922142-43b9-4238-b652-ba3d2655c9f2","00940391-2cce-4859-9e28-488a4be0cc9d","00944592-a491-41f3-b225-70409828a71d","009523d1-b9ba-413c-9db3-6ffe48410318","00969a0e-1d2d-48c1-b2a5-c19c8b4db250","0097eb7c-7d05-44d7-b0c3-87542f446998","00a190a8-ce0e-458f-b39c-e72c527377cb","00a1bc28-6ca1-4d39-b7f6-fb8a91e7e964","00a3fcc0-76c4-4d54-a83b-b52fe967bfda","00a53eb6-6bba-4f43-a9a4-7ca579316257","00a9216d-3b23-4b7f-a43b-526691b7b9be","00ac5ae5-5d95-420d-a46a-eb6fb3db7839","00ae471e-8cab-47f3-880c-e0ac5e20412c","00af5f24-bf2a-486e-82a7-5c57f0f0e982","00b22663-2f52-4c03-b83b-47ec41db3c8b","00b2c5f6-b79f-4d40-98d7-07eba7f8f7db","00b56f17-e8d9-4b03-a0b7-56e4ecaee6ac","00b65487-72a8-4c43-880e-9ce7c0b7adf9","00b6bfcb-0c40-4fbf-88bd-50655ce11937","00b80825-a2ed-48a6-af04-3657c738e037","00b87da9-af21-4219-b73a-84fc4e62ef5f","00ba75e8-3eb0-40ca-832c-3faf28e8ae89","00bb5be0-8df8-400d-aecf-bd7674b469fb"]}]}]},"zoom":10,"tileUrl":"http://52.42.219.204:8090/tileserver.php?/index.json%253f/%253f/index.json?/3439rows/20/249439/379002.pbf"};
	initLayer(tileJSON);

	</script>
	</body>
	</html>
No results found