Population Density Explorer (populationexplorer.org) leaflet client and c# asp.net server, sqlite database
<!DOCTYPE html>
<html>
<head>
<script src='https://static-assets.mapbox.com/gl-pricing/dist/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
<div id='map' style='width: 500px; height: 700px;'></div>
<script>
mapboxgl.accessToken = 'put your toke here';
var map = new mapboxgl.Map({
container: 'map',
center: [120.7, 23.6],
zoom: 7,
style: 'mapbox://styles/mapbox/streets-v11'
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-HANT">
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<style>
.map {
height: 750px;
width: 480px;
}
</style>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<title>OpenLayers 範例</title>
</head>
<body>
<h2>我的地圖</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([120.7, 23.7]),
zoom: 8
})
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Leaflet 基本範例</title>
<meta charset="utf-8" />
<!-- Leaflet icon -->
<link rel="shortcut icon" type="image/x-icon" href="https://leafletjs.com/docs/images/favicon.ico" >
<!-- Include Leaflet CSS file -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css">
<!-- Include Leaflet JavaScript file after Leaflet’s CSS -->
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
<style>
#map {
width: 480px;
height: 750px;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
var mymap = L.map('map').setView([23.7, 120.7], 8);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
id: 'mapbox.streets'
}).addTo(mymap);
</script>
</body>
</html>
</body><!DOCTYPE html>
<html>
<head>
<meta name="description" content="Leaflet 國土測繪圖資雲範例">
<title>Leaflet 國土測繪圖資雲範例</title>
<meta charset="utf-8" />
<!-- Leaflet icon -->
<link rel="shortcut icon" type="image/x-icon" href="https://leafletjs.com/docs/images/favicon.ico" >
<!-- Include Leaflet CSS file -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css">
<!-- Include Leaflet JavaScript file after Leaflet’s CSS -->
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<style>
h1 {color:red; background-color:yellow;}
#map {
width: 480px;
height: 750px;
}
</style>
</head>
<body>
<h1> leaflet 示範</h1>
<div id='map'></div>
<script>
var mymap = L.map('map').setView([23.7, 120.7], 8);
L.tileLayer('https://wmts.nlsc.gov.tw/wmts/{id}/default/GoogleMapsCompatible/{z}/{y}/{x}.png', {
maxZoom: 18,
id: 'LUIMAP'
}).addTo(mymap);
L.tileLayer('https://wmts.nlsc.gov.tw/wmts/{id}/default/GoogleMapsCompatible/{z}/{y}/{x}.png', {
maxZoom: 18,
id: 'EMAP2'
}).addTo(mymap);
// EMAP 臺灣通用電子地圖; EMAP5 臺灣通用電子地圖(套疊等高線), EMAP6 臺灣通用電子地圖(不含等高線)
//LANDSECT 段籍圖; LUIMAP 國土利用調查成果圖; PHOTO2 正射影像圖(通用版); DMAPS 地籍圖磚
//EMAP8 臺灣通用電子地圖EN; EMAP7 臺灣通用電子地圖EN(透明)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Leaflet Quick Start">
<title>Quick Start - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Leaflet icon -->
<link rel="shortcut icon" type="image/x-icon" href="https://leafletjs.com/docs/images/favicon.ico" >
<!-- Include Leaflet CSS file -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css">
<!-- Include Leaflet JavaScript file after Leaflet’s CSS -->
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
</head>
<body>
<!-- div element with a certain id where you want your map to be -->
<div id="mapid" style="width: 480px; height: 750px;"></div>
<script>
//initialize with [lat,long],zoom
var mymap = L.map('mapid').setView([23.7, 120.7], 8);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
L.marker([24.25, 121]).addTo(mymap)
.bindPopup("<b>Hello world!</b><br />這是點.").openPopup();
L.circle([23.5, 121], 15000, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(mymap).bindPopup("這是圓");
L.polygon([
[23.8, 120.4],
[23.8, 120.6],
[24.0, 120.4]
]).addTo(mymap).bindPopup("這是多邊形");
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("你點的位置是 " + e.latlng.toString())
.openOn(mymap);
}
mymap.on('click', onMapClick);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<!-- Leaflet icon -->
<link rel="shortcut icon" type="image/x-icon" href="https://leafletjs.com/docs/images/favicon.ico" >
<!-- Include Leaflet CSS file -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css">
<!-- Include Leaflet JavaScript file after Leaflet’s CSS -->
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<title>Leaflet nlsc & egis.moea</title>
</head>
<body>
<div id='map_div' style="height:800px;width:800px"></div>
<script>
var mymap = L.map('map_div').setView([25.0401,121.509], 16);
//國土測繪中心 wmts作為底圖
var basemap = L.tileLayer('https://wmts.nlsc.gov.tw/wmts/EMAP/default/GoogleMapsCompatible/{z}/{y}/{x}', {
attribution: '資料來源:<a href="https://maps.nlsc.gov.tw/">國土測繪圖資服務雲; <a href="https://egis.moea.gov.tw/">經濟地理圖資中心</a>'
}).addTo(mymap);
L.marker([25.0401, 121.509]).addTo(mymap)
L.circle([25.0401, 121.509], 500, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.2
}).addTo(mymap)
//使用jquery ajax 介接經濟部經濟地理圖資中心商家查詢api, 可cross site 查詢
$.ajax({
url: "https://egis.moea.gov.tw/MoeaEGFxData_WebAPI_Inside/InnoServe/BusinessBUSM?resptype=GeoJson&x=121.509&y=25.0401&buffer=500",
type: 'GET',
success: function (data) {
var symbol = {
radius: 3,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};
L.geoJSON(data, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, symbol);
},
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.BussName);
}
}).addTo(mymap);
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>VectorGrid.Protobuf example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css">
</head>
<body style='margin:0'>
<div id="map" style="width: 480px; height:750px; background: white"></div>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
<script type="text/javascript" src="https://unpkg.com/leaflet.vectorgrid@1.2.0"></script>
<!-- <script type="text/javascript" src="../dist/Leaflet.VectorGrid.bundled.js"></script> -->
<script>
var map = L.map('map');
var vectorTileStyling = {
water: {
fill: true,
weight: 1,
fillColor: '#06cccc',
color: '#06cccc',
fillOpacity: 0.2,
opacity: 0.4,
},
admin: {
weight: 1,
fillColor: 'pink',
color: 'pink',
fillOpacity: 0.2,
opacity: 0.4
},
waterway: {
weight: 1,
fillColor: '#2375e0',
color: '#2375e0',
fillOpacity: 0.2,
opacity: 0.4
},
landcover: {
fill: true,
weight: 1,
fillColor: '#53e033',
color: '#53e033',
fillOpacity: 0.2,
opacity: 0.4,
},
landuse: {
fill: true,
weight: 1,
fillColor: '#e5b404',
color: '#e5b404',
fillOpacity: 0.2,
opacity: 0.4
},
park: {
fill: true,
weight: 1,
fillColor: '#84ea5b',
color: '#84ea5b',
fillOpacity: 0.2,
opacity: 0.4
},
boundary: {
weight: 1,
fillColor: '#c545d3',
color: '#c545d3',
fillOpacity: 0.2,
opacity: 0.4
},
aeroway: {
weight: 1,
fillColor: '#51aeb5',
color: '#51aeb5',
fillOpacity: 0.2,
opacity: 0.4
},
road: { // mapbox & nextzen only
weight: 1,
fillColor: '#f2b648',
color: '#f2b648',
fillOpacity: 0.2,
opacity: 0.4
},
tunnel: { // mapbox only
weight: 0.5,
fillColor: '#f2b648',
color: '#f2b648',
fillOpacity: 0.2,
opacity: 0.4,
// dashArray: [4, 4]
},
bridge: { // mapbox only
weight: 0.5,
fillColor: '#f2b648',
color: '#f2b648',
fillOpacity: 0.2,
opacity: 0.4,
// dashArray: [4, 4]
},
transportation: { // openmaptiles only
weight: 0.5,
fillColor: '#f2b648',
color: '#f2b648',
fillOpacity: 0.2,
opacity: 0.4,
// dashArray: [4, 4]
},
transit: { // nextzen only
weight: 0.5,
fillColor: '#f2b648',
color: '#f2b648',
fillOpacity: 0.2,
opacity: 0.4,
// dashArray: [4, 4]
},
building: {
fill: true,
weight: 1,
fillColor: '#2b2b2b',
color: '#2b2b2b',
fillOpacity: 0.2,
opacity: 0.4
},
water_name: {
weight: 1,
fillColor: '#022c5b',
color: '#022c5b',
fillOpacity: 0.2,
opacity: 0.4
},
transportation_name: {
weight: 1,
fillColor: '#bc6b38',
color: '#bc6b38',
fillOpacity: 0.2,
opacity: 0.4
},
place: {
weight: 1,
fillColor: '#f20e93',
color: '#f20e93',
fillOpacity: 0.2,
opacity: 0.4
},
housenumber: {
weight: 1,
fillColor: '#ef4c8b',
color: '#ef4c8b',
fillOpacity: 0.2,
opacity: 0.4
},
poi: {
weight: 1,
fillColor: '#3bb50a',
color: '#3bb50a',
fillOpacity: 0.2,
opacity: 0.4
},
earth: { // nextzen only
fill: true,
weight: 1,
fillColor: '#c0c0c0',
color: '#c0c0c0',
fillOpacity: 0.2,
opacity: 0.4
},
// Do not symbolize some stuff for openmaptiles
country_name: [],
marine_name: [],
state_name: [],
place_name: [],
waterway_name: [],
poi_name: [],
road_name: [],
housenum_name: [],
};
var openmaptilesUrl = "https://free-{s}.tilehosting.com/data/v3/{z}/{x}/{y}.pbf.pict?key={key}";
var openmaptilesVectorTileOptions = {
rendererFactory: L.canvas.tile,
attribution: '<a href="https://openmaptiles.org/">© OpenMapTiles</a>, <a href="http://www.openstreetmap.org/copyright">© OpenStreetMap</a> contributors',
vectorTileLayerStyles: vectorTileStyling,
subdomains: '0123',
key: 'UmmATPUongHdDmIicgs7',
maxZoom: 14
};
L.vectorGrid.protobuf(openmaptilesUrl, openmaptilesVectorTileOptions).addTo(map);
map.setView([23.7, 120.7], 8);;
</script>
</body>
</html>