I'm trying to test mapbox, but I am stuck in trying to visualize some polygons coming from a .geojson file.
Here's my code:
(needs Allow-Control-Allow-Origin Chrome Plugin to work properly).
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Point in polygon</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
.state {
position:absolute;
top:10px;
right:10px;
z-index:1000;
}
.state strong {
background:#404040;
color:#fff;
display:block;
padding:10px;
border-radius:3px;
}
</style>
<!--
This example requires jQuery to load the file with AJAX.
You can use another tool for AJAX.
This pulls the file airports.csv, converts into into GeoJSON by autodetecting
the latitude and longitude columns, and adds it to the map.
Another CSV that you use will also need to contain latitude and longitude
columns, and they must be similarly named.
-->
<script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-pip/v0.0.2/leaflet-pip.js'></script>
<div id='map'></div>
<div id='state' class='state'></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoicmljcmljdWNpdCIsImEiOiIyODdkMTk4YmY5YTllYWQ1ZTk5MWQ5NTEwYmIwMjQ3OSJ9.a2bQbD9hl6dOCI7Om1BcwQ';
var state = document.getElementById('state');
var map = L.mapbox.map('map', 'mapbox.emerald')
.setView([38, -95], 4);
$.ajax({
//url: 'https://www.mapbox.com/mapbox.js/assets/data/us-states.geojson', // correctly show U.S.A
url: 'http://playground.nothingisclear.net/simplified_LW_2015.geojson', // should show some areas in south-west Germany (Baden-Wuttemberg)
dataType: 'json',
success: function load(d) {
console.log(d);
var states = L.geoJson(d).addTo(map);
}
});
</script>
</body>
</html>
My problem is that my geojson –showing polygons in a south west region of Germany– doesn't work (http://playground.nothingisclear.net/simplified_LW_2015.geojson)
while mapbox's example –showing U.S.A.– works (https://www.mapbox.com/mapbox.js/assets/data/us-states.geojson).
I've triple-checked the geojson and it seems to have no errors at all, but somehow it doesn't show the polygons on the map.
Any ideas on how to solve this?
Thank you.
To test: switch on/off the comments where you see url: of the ajax call.
From your GeoJSON file:
"geometry":{"type":"Polygon","coordinates":[[[3519139.557897714,5400906.9684712365]
This GeoJSON file is in a different projection than EPSG:4326, so the coordinates are very far from valid: longitude should be >-180 and <180, latitude >-90 and <90. Reproject your data into EPSG:4326 and your example will work.
Related
I need a direction, 'cause I don't know how to look for it, or basically how to do that.
Every time a user presses a locate button it will locate his position (already done this part)
And then, I want to give certain details about his city (in my case, I want to give corona details of people amount that are infected in the city area)
for example: so lets say the user lives in new york, and then he clicks on locate position, it gives him the amount of sick people in his area.
i used this website for my code:
https://developers.arcgis.com/javascript/3/jssamples/widget_locate.html
my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>OpenStreetMap</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.35/esri/css/esri.css">
<style>
html, body, #esri-map-container {
padding: 0px;
margin: 0px;
height: 100%;
width: 800px;
height: 500px;
}
#LocateButton {
position: absolute;
top: 95px;
left: 20px;
z-index: 50;
}
</style>
<script src="https://js.arcgis.com/3.35/"></script>
<script>
var map;
require([
"esri/map",
"esri/dijit/LocateButton",
"dojo/domReady!"
], function(Map, LocateButton)
{
map = new Map("map", {
center: [-56.049, 38.485],
zoom: 3,
basemap: "streets"
});
geoLocate = new LocateButton({
map: map
}, "LocateButton");
geoLocate.startup();
});
</script>
</head>
<body>
<div id="map" class="map">
<div id="LocateButton"></div>
</body>
</html>
So yeah, I don't know where to search really, if you can direct me or help me out figuring how am I supposed to do that.
You can get some information data about the location detected by using the 'locate' event.
In there you will find the coordinates of the location and much more. I personally tried to convert coordinates to address but there is not much ArcGIS support right now. If you find a way through Google's API maybe you will be able to finally get the city through the coordinates ArcGIS gives you.
geoLocate.on('locate', (data) => {
console.log(data);
});
You will find a working example of the event I mentioned above here.
First of all, give thanks for reading my question and try to help me and apologize for my English.
I have the following problem ...
I would like from the html to execute a function of a js file that I have created, to which you pass two parameters: the name of the map and the id where the map should be loaded. But being a module type tells me it is not defined. However, if that file js is not a module type and does not have any import if it recognizes and executes it.
My code is the following ...
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Map Generator</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script type="module" src='./js/index.js'></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; height:100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
customMap.addMap("icgc", "map");
</script>
</body>
</html>
index.js file
import MapFunctions from './class/MapFunctions.js'
// new MapFunctions().createMap("openstreetmaps", "map");
var customMap = {
addMap: function name(base, target) {
new MapFunctions().createMap(base, target);
}
}
With the constructor it works, but the purpose is that from the index.html you only have to make the call to the function customMap.addMap () and only importing the file index.js
Here you have the repository in case you see it there more clearly
Thank you
I have a application on ionic that is working with views, in a view a want to insert a map in a div, but is not possible for the body css declaration, I want to now if exists a wrapper to show this maps or if I need a correct the css.
Ionic view
<ion-view view-title="Map" can-swipe-back="false" hide-back-button="false">
<h1>Map view</h1>
<button ng-click="map.reloadState()" class="button positive-button">Change State!!!</button>
<\ion-view>
Map example
<!DOCTYPE html>
<html>
<head>
<!-- Load Leaflet from CDN-->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"></script>
<!-- Load Esri Leaflet locally, after cloning this repository -->
<script src="http://cdn.jsdelivr.net/leaflet.esri/2.0.0-beta.7/esri-leaflet.js"></script>
<style>
html, body, #map {
margin:0; padding:0; width : 100%; height : 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([45.528, -122.680], 13);
L.esri.basemapLayer("Gray").addTo(map);
var parks = L.esri.featureLayer({
url: "http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Portland_Parks/FeatureServer/0",
style: function () {
return { color: "#70ca49", weight: 2 };
}
}).addTo(map);
var popupTemplate = "<h3>{NAME}</h3>{ACRES} Acres<br><small>Property ID: {PROPERTYID}<small>";
parks.bindPopup(function(e){
return L.Util.template(popupTemplate, e.feature.properties)
});
</script>
</body>
</html>
I have already done the following...
I downloaded the .svg for colorado's counties
Then opened the .svg with notepad/notepad++ etc. and pasted everything to this site that converts it into a jvectormap.
Now that I have done that I am wondering how I incorporate the counties into my map of the united states. An example of this can be found here: http://jvectormap.com/examples/drill-down/ When you click on one of the states it zooms in and displays the counties.
Currently this is what I have:
<!DOCTYPE html>
<html>
<head>
<title>jVectorMap demo</title>
<link rel="stylesheet" href="jquery-jvectormap-2.0.1.css" type="text/css" media="screen"/>
<script src="jquery.js"></script>
<script src="jquery-jvectormap-2.0.1.min.js"></script>
<script src="jquery-jvectormap-us-aea-en.js"></script>
<script src="co-counties.js"></script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
<script>
$(function(){
new jvm.MultiMap({
container: $('#map'),
maxLevel: 1,
main: {
map: 'us_aea_en'
},
mapUrlByCode: function(code, multiMap){
return '/js/us-counties/jquery-jvectormap-data-'+
code.toLowerCase()+'-'+
multiMap.defaultProjection+'-en.js';
}
});
});
</script>
</body>
</html>
It zooms in on a state when you click it but now I need it to transition into the county view.
Also, my Colorado counties jvectormap is currently named 'co-counties.js'
Any help at all would be greatly appreciated!
thanks!
I fixed this problem for all states by downloading the full project for jvectormap - http://jvectormap.com/download/
and under /tests/assets/us the author includes all the js files needed. Just copy them over to your project and use:
new jvm.MultiMap({
container: $('.jvectormap-container'),
maxLevel: 1,
main: {
map: 'us_lcc_en'
},
mapUrlByCode: function(code, multiMap){
return '../js/counties/jquery-jvectormap-data-'+
code.toLowerCase()+'-'+
multiMap.defaultProjection+'-en.js';
}
});
and it will load each of the county maps on demand
I'm creating a map in TileMill which shows the age of various buildings by color. I have 4 data layers (each with 50 years of building construction, so it can be toggled on/off) and a base layer.
Within TileMill I can see tooltips when I hover over the shapefiles. I've customized them so it shows the age of construction of the building the cursor is hovering over. However when I export to MBTiles to upload to MapBox for integration on my website, the hover functionality is gone, and there is no legend.
I have searched for hours for help on MapBox's website and API. I am not using Markers so I cannot use that as a solution (there are over 800,000 buildings). Is there any way to do this?
var map = L.mapbox.map('map', 'jacobs74.xoonovka', {
legendControl: {
// any of the valid control positions:
// http://leafletjs.com/reference.html#control-positions
position: 'bottomleft'
}, zoomControl: false
})
.setView([41.8928, -87.6491], 14),
markerLayer = L.mapbox.markerLayer().addTo(map);
map.gridControl.options.follow = true;
new L.Control.Zoom({ position: 'topright' }).addTo(map);
var gridLayer = L.mapbox.gridLayer('jacobs74.xoonovka');
map.addLayer(gridLayer);
map.addControl(L.mapbox.gridControl(gridLayer, {follow: true}));
L.control.layers({
}, {
'Thru 1899': L.mapbox.tileLayer('jacobs74.s37bpdgq'),
'1900-1949': L.mapbox.tileLayer('jacobs74.fi084ush'),
'1950-1999': L.mapbox.tileLayer('jacobs74.yh8prbfi'),
'2000-Now': L.mapbox.tileLayer('jacobs74.awsw2ji1')
}).addTo(map);
It's a bit unclear where your issue is. Please include a copy of your code. As for creating a tooltip for tile as well as marker layers. Just set the follow option to true map.gridControl
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Movetip</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<script src='//api.tiles.mapbox.com/mapbox.js/v1.5.2/mapbox.js'></script>
<link href='//api.tiles.mapbox.com/mapbox.js/v1.5.2/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
var map = L.mapbox.map('map', 'examples.map-8ced9urs');
map.gridControl.options.follow = true;
</script>
</body>
</html>