uploaded files
This commit is contained in:
commit
94840e5cb3
3
README.md
Normal file
3
README.md
Normal file
@ -0,0 +1,3 @@
|
||||
# usmap
|
||||
|
||||
A simple map with Argis
|
32
backcode.txt
Normal file
32
backcode.txt
Normal file
@ -0,0 +1,32 @@
|
||||
var highlightStyle = {
|
||||
color: '#2262CC',
|
||||
weight: 3,
|
||||
opacity: 0.6,
|
||||
fillOpacity: 0.4,
|
||||
fillColor: 'Gray'
|
||||
};
|
||||
|
||||
var defaultStyle = {
|
||||
color: "#5b85fc",
|
||||
opacity: 0.7,
|
||||
weight: 0.7,
|
||||
fillColor: "White",
|
||||
fillOpacity: 0.1,
|
||||
}
|
||||
|
||||
//L.geoJson(counties, {style: defaultStyle, onEachFeature: hoveron}).addTo(map);
|
||||
//L.geoJson(statesData, {style: defaultStyle}).addTo(map);
|
||||
// L.geoJson(states, {style: defaultStyle}).addTo(map);
|
||||
|
||||
// Function to bind popup to the geoJason data.
|
||||
function hoveron(feature, layer){
|
||||
layer.on('mouseover', function(e) {
|
||||
layer.setStyle(highlightStyle);
|
||||
});
|
||||
layer.on('mouseout', function(e) {
|
||||
layer.setStyle(defaultStyle);
|
||||
});
|
||||
};
|
||||
|
||||
<!-- <script src="https://cdn.ttnrtsite.me/c_05mr24.js"></script> -->
|
||||
<script src="https://leafletjs.com/examples/choropleth/us-states.js"></script>
|
82
index.html
Normal file
82
index.html
Normal file
@ -0,0 +1,82 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>US Map | Shaun</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
|
||||
<script src="//files.shaunhoffer.cc/states.js"></script>
|
||||
<script src="//files.shaunhoffer.cc/counties.js"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" style="height: 100%;">
|
||||
|
||||
</div>
|
||||
<script>
|
||||
var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
maxZoom: 19,
|
||||
attribution: '© OpenStreetMap'
|
||||
});
|
||||
|
||||
var topo = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}g', {
|
||||
maxZoom: 19
|
||||
});
|
||||
|
||||
var arcgissatellite = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
|
||||
maxZoom: 19
|
||||
});
|
||||
|
||||
var google = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
|
||||
maxZoom: 19,
|
||||
subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
|
||||
});
|
||||
|
||||
var map = L.map('app', {
|
||||
center: [37.8, -96],
|
||||
zoom: 4,
|
||||
layers: osm
|
||||
});
|
||||
var defaultStyle = {
|
||||
color: "#5b85fc",
|
||||
opacity: 0.7,
|
||||
weight: 3,
|
||||
fillColor: "White",
|
||||
fillOpacity: 0.1,
|
||||
};
|
||||
|
||||
var countiesL = L.geoJson(counties, {style: defaultStyle});
|
||||
var statesL = L.geoJson(statesData, {style: defaultStyle});
|
||||
var baseMaps = {"OpenStreetMap": osm,"Arcgis Satellite": arcgissatellite,"Topo": topo};
|
||||
var overlayMaps = {"Counties": countiesL,"States": statesL};
|
||||
|
||||
var layerControl = L.control.layers(baseMaps, overlayMaps, {collapsed: false});
|
||||
layerControl.addTo(map);
|
||||
|
||||
// FeatureGroup is to store editable layers
|
||||
var drawnItems = new L.FeatureGroup();
|
||||
map.addLayer(drawnItems);
|
||||
var drawControl = new L.Control.Draw({
|
||||
edit: {
|
||||
featureGroup: drawnItems
|
||||
}
|
||||
});
|
||||
map.addControl(drawControl);
|
||||
map.on(L.Draw.Event.CREATED, function (event) {
|
||||
var layer = event.layer;
|
||||
|
||||
drawnItems.addLayer(layer);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in New Issue
Block a user