Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
226 lines (185 sloc) 10.3 KB
<!DOCTYPE html>
<html lang="en">
<head>
<title>Drag and Drop GeoJSON File onto Map - Azure Maps Web SDK Samples</title>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="This sample shows how load add support for dragging and dropping GeoJSON files on to the map and having them render." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, GeoJSON, drag, drop, dropover, FileReader" />
<meta name="author" content="Microsoft Azure Maps" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
<script type='text/javascript'>
var map, datasource, popup;
function GetMap() {
//Point the Azure Maps domain to the US Azure Gov Cloud domain.
atlas.setDomain('atlas.azure.us');
//Initialize a map instance.
map = new atlas.Map('myMap', {
view: 'Auto',
//Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<Your Azure Maps Key>'
}
});
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Add the Style Control to the map.
map.controls.add(new atlas.control.StyleControl({
//Optionally specify which map styles you want to appear in the picker.
//All styles available with the S0 license tier appear by default in the control.
//If using a S1 tier license, you can use the mapStyles option to add the 'satellite' and 'satellite_road_labels' styles to the control.
mapStyles: ['road', 'road_shaded_relief', 'grayscale_light', 'night', 'grayscale_dark', 'satellite', 'satellite_road_labels']
}), {
position: "top-right"
});
//Setup the drag & drop listeners on the map.
var dropZone = document.getElementById('myMap');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
//Create a data source to store the data in.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Add a layer for rendering the polygons.
var polygonLayer = new atlas.layer.PolygonLayer(datasource, null, {
fillColor: '#1e90ff',
filter: ['any', ['==', ['geometry-type'], 'Polygon'], ['==', ['geometry-type'], 'MultiPolygon']] //Only render Polygon or MultiPolygon in this layer.
});
//Add a click event to the layer.
map.events.add('click', polygonLayer, featureClicked);
//Add a layer for rendering line data.
var lineLayer = new atlas.layer.LineLayer(datasource, null, {
strokeColor: '#1e90ff',
strokeWidth: 4,
filter: ['any', ['==', ['geometry-type'], 'LineString'], ['==', ['geometry-type'], 'MultiLineString']] //Only render LineString or MultiLineString in this layer.
});
//Add a click event to the layer.
map.events.add('click', lineLayer, featureClicked);
//Add a layer for rendering point data.
var pointLayer = new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
allowOverlap: true,
ignorePlacement: true
},
filter: ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']] //Only render Point or MultiPoints in this layer.
});
//Add a click event to the layer.
map.events.add('click', pointLayer, featureClicked);
//Add polygon and line layers to the map, below the labels..
map.layers.add([
polygonLayer,
//Add a layer for rendering the outline of polygons.
new atlas.layer.LineLayer(datasource, null, {
strokeColor: 'black',
filter: ['any', ['==', ['geometry-type'], 'Polygon'], ['==', ['geometry-type'], 'MultiPolygon']] //Only render Polygon or MultiPolygon in this layer.
}),
lineLayer, pointLayer
], 'labels');
//Add the point layer above the labels.
map.layers.add(pointLayer);
//Create a popup but leave it closed so we can update it and display it later.
popup = new atlas.Popup({
position: [0, 0]
});
});
}
function handleDragOver(evt) {
//Stop the browser from performing its default behavior when a file is dragged and dropped.
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy';
}
function handleFileSelect(evt) {
//Stop the browser from performing its default behavior when a file is dragged and dropped.
evt.stopPropagation();
evt.preventDefault();
//Remove any existing data from the map.
datasource.clear();
//The list of files that have been dragged and dropped onto the map.
var files = evt.dataTransfer.files;
//Keep track of the bounding box of all the data from all files dropped into the map.
var dataBounds = null;
//Loop through and attempt to read each file.
for (var i = 0; i < files.length; i++) {
var reader = new FileReader();
reader.onload = function (e) {
try {
var geojsonData = JSON.parse(e.target.result);
//Add the GeoJSON data to the data source.
datasource.add(geojsonData);
//Calculate the bounding box of the GeoJSON data.
var bounds = atlas.data.BoundingBox.fromData(geojsonData);
//If data is already loaded from another GeoJSON file, merge the bounding boxes together.
if (dataBounds) {
dataBounds = atlas.data.BoundingBox.merge(dataBounds, bounds);
} else {
dataBounds = bounds;
}
//Update the map view to show the data.
map.setCamera({
bounds: dataBounds,
padding: 50
});
} catch (e) {
alert('Unable to read file as GeoJSON.');
}
};
//Read the file as text.
reader.readAsText(files[i]);
}
}
function featureClicked(e) {
//Make sure the event occurred on a shape feature.
if (e.shapes && e.shapes.length > 0) {
//By default, show the popup where the mouse event occurred.
var pos = e.position;
var offset = [0, 0];
var properties;
if (e.shapes[0] instanceof atlas.Shape) {
properties = e.shapes[0].getProperties();
//If the shape is a point feature, show the popup at the points coordinate.
if (e.shapes[0].getType() === 'Point') {
pos = e.shapes[0].getCoordinates();
offset = [0, -18];
}
} else {
properties = e.shapes[0].properties;
//If the shape is a point feature, show the popup at the points coordinate.
if (e.shapes[0].type === 'Point') {
pos = e.shapes[0].geometry.coordinates;
offset = [0, -18];
}
}
//Update the content and position of the popup.
popup.setOptions({
//Create a table from the properties in the feature.
content: atlas.PopupTemplate.applyTemplate(properties),
position: pos,
pixelOffset: offset
});
//Open the popup.
popup.open(map);
}
}
</script>
</head>
<body onload="GetMap()">
<div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
<legend><h1 style="font-size:16px">Drag and Drop GeoJSON File onto Map</h1></legend>
This sample shows how load add support for dragging and dropping GeoJSON files from your local computer file system on to the map and having them render on the map.
Also take a look at the <a href="/index.html#Spatial-IO-Module" target="_blank">spatial IO module samples</a> if you would like to support additional spatial data formats such as KML, KMZ, GPX, GeoRSS, GML, and spatial CSV files.
Here are some places where you can find some sample GeoJSON files.
<br/>
<ul>
<li><a href="https://catalog.data.gov/dataset?q=geojson" target="_blank">Data.gov</a></li>
<li><a href="https://boundaries.latimes.com/sets/" target="_blank">Mapping L.A. Boundaries API</a></li>
<li><a href="https://github.com/search?q=geojson" target="_blank">GitHub</a></li>
</ul>
<br/>Here are some great places to find GeoJSON files to try out. You can also create your own GeoJSON files by drawing on a map <a href="http://geojson.io" target="_blank">here</a>.
</fieldset>
</body>
</html>
You can’t perform that action at this time.