So I have a small issue with a map, particularly map style, from Mapbox that a designer has created for me to work with.
I have an access to her account and I can view the map as soon as I go in to account -> styles. So my question is, how can i reference her design in order to build up on top of this my custom markers and etc?
I have tried downloading a json file to find an ID there but no luck. Also tried to copy the stuff from URI when you click on the style, still no ID's. If you need more explanation I can do my best to provide you with one.
So far my HTML looks like this.
<html>
<head>
<meta charset=utf-8 />
<title>A simple map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.3.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.3.0/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>
L.mapbox.accessToken = 'token';
var map = L.mapbox.map('map', 'ciltdxqbt00jef7m0y99qpkt2')
.setView([40, -74.50], 9);
</script>
</body>
</html>
Actually I found a solution myself. The reason I could not understand why I can get an ID of a map that has been created in editor and not the one that has been created using Visual Studio.
Silly Silly me!
So the only difference is very very small, its just the way you reference it!
Let me explain :)
The map that has been created using editor you would normally do something like this:
L.mapbox.accessToken = 'accesstoken;
// map refers to a <div> element with the ID map
// mapbox.streets is the ID of a map on Mapbox.com
var map = L.mapbox.map('map', 'mapbox.streets');
Here I am referencing a map with an id streets from mapbox, you can get an id when you create your map in editor from url at the very end, for example https://www.mapbox.com/editor/?id=*username*.ph8b3e4a#saved
the ph8b3e4a would be an id. So to make a map you do something like this
L.mapbox.accessToken = 'accesstoken;
// map refers to a <div> element with the ID map
// mapbox.streets is the ID of a map on Mapbox.com
var map = L.mapbox.map('map', *username*.ph8b3e4a');
But if the map is created in Mapbox Studio, its done like this.
L.mapbox.accessToken = 'accesstoken;
var map = L.mapbox.map('map')
.setView([38.97416, -95.23252], 15);
L.mapbox.styleLayer('mapbox://styles/*username*/*style*').addTo(map);
this can be copied from right hand side of your styles directory.
I hope this is helpful for anyone who struggles like me :)
Related
My goal is to takes real-world map/streets and create custom roads, apply a way to navigate through my own roads along with existing streets in the world
After creating a new street, i exported the osm file, brought it to Maperitive to generate the tiles. i then make use of leaflet routing machine to do navigation through my new street in HTML. However, it seems to completely ignore what i have added. I am new into these software and cant seem to find what did i do wrong
Download from OSM into JOSM, created new street.
Exported as OSM, opened in Maperitive.
Export into Tiles, use Leaflet & Leaflet routing machine to try and route within the new street.
<link rel="stylesheet" href="Map Navigation/leaflet.css" />
<link rel="stylesheet" href="Map Navigation/leaflet-routing-machine-3.2.12/dist/leaflet-routing-machine.css" />
<script src="Map Navigation/leaflet.js"></script>
</head>
<body>
<div style="width: 1200px; height: 800px" id="map"></div>
<script type="text/javascript" src="Map Navigation/leaflet-src.js"></script>
<script src="Map Navigation/leaflet-routing-machine-3.2.12/dist/leaflet-routing-machine.js"></script>
<script>
var mymap = L.map('map').setView([1.269506, 103.832759], 13);
L.tileLayer('Map Navigation/Tiles/{z}/{x}/{y}.png', {maxZoom: 16}).addTo(mymap);
L.Routing.control({ waypoints:[
L.latLng(1.269506, 103.832759),
L.latLng(1.269542, 103.835772)],
routeWhileDragging: true
}).addTo(mymap);
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(mymap);
}
mymap.on('click', onMapClick);
I have the following HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<title>KML Layers</title>
<style>
#map {
height: 90%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {lat: 41.876, lng: -87.624}
});
var ctaLayer = new google.maps.KmlLayer({
url: 'http://ec2-54-198-148-171.compute-1.amazonaws.com/webapp/public/kmlfiles/LargeCoordinates.kml',
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBMtoh9P3UkoxbXndKu_HOP7KsVwTRvxGU&callback=initMap">
</script>
</body>
</html>
The KML present here - http://ec2-54-198-148-171.compute-1.amazonaws.com/webapp/public/kmlfiles/LargeCoordinates.kml is not shown on the map.
All my other KML files work ok, just not this one. I believe this is because there are many coordinates in the KML file.
Any help to fix it would be appreciated.
In your 5th placemark/polygon (the big one), the line with the geometry/coordinates seems to be truncated. First clue is that there appear to be missing tags at the end of the line. It ends with only the </MultiGeometry> tag, when it needs to end with: </coordinates></LinearRing></outerBoundaryIs></Polygon></MultiGeometry>.
Looking more closely at the last set of coordinates, they appear to be cut off, ending after the decimal point in the 2nd number: -96.697594,46.
So you'll need to at least add the appropriate tags to close out the line, and probably fix the last coordinate pair (or just remove it). That should give you a valid KML file which should load (so long as the geometry isn't too big for Maps). You'll also want to check the source data to see if additional coordinates are missing from that line, and if so, figure out how to get them back.
To help others with similar issues, do you know how that KML was generated? With what software? Maybe something that can only handle so many characters in the coordinate string?
I'm doing a google map with custom symbols on locations provided by the client. Pasted below is a simplified version. When I set the path to the marker graphic .png in my own hard drive, and view the map in my own browser, everything works fine: The custom markers appear in the correct locations.
However, when I set the path to the marker .png in Dropbox, the marker does not appear on the map- neither with nor without the "?dl=0" suffix that Dropbox adds to the filename. I've also tried keeping the graphic on my Google Drive and pulling it from there; That didn't work either.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>GoogleMapHawthorne It Works!</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 950px; height: 525px;"></div>
<script type="text/javascript">
// locationsSC = locations in Service, Community Asset layer
var locationsSC = [
['Fish Emergency Services', 45.512388, -122.651950],
['Southeast Community Bike Fix-it Station', 45.512360, -122.634061],
['Southeast Kitchen Share', 45.508305, -122.637014],
['Southeast Tool Library', 45.508312, -122.637690],
['Southeast Uplift Neighborhood Coalition', 45.513445, -122.627480]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: new google.maps.LatLng(45.510000, -122.630930),
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
// adding Service, Community Asset markers
var markerSC, sc;
for (sc = 0; sc < locationsSC.length; sc++) {
markerSC = new google.maps.Marker({
position: new google.maps.LatLng(locationsSC[sc][1], locationsSC[sc][2]),
map: map,
icon: {
url: 'https://www.dropbox.com/s/set461kj7rt1zv5/ServiceBrownCog.png',
scaledSize: new google.maps.Size(25, 25)
}
});
google.maps.event.addListener(markerSC, 'click', (function(markerSC, sc) {
return function() {
infowindow.setContent(locationsSC[sc][0]);
infowindow.open(map, markerSC);
}
})(markerSC, sc));
}
</script>
</body>
</html>
Is the problem in my code? Or is it Dropbox?
I'm just beginning to learn JavaAcript; Most of the code is snippets copied (by typing) from various tutorials.
I have no qualms about pasting the actual file path in the code here. That file location is going to be public anyway. If anyone can think of a good reason I shouldn't do this, feel free to say so- and why.
Above all, thanks in advance.
https://www.dropbox.com/s/set461kj7rt1zv5/ServiceBrownCog.png isn't a link to an image. It's a link to a web page that (among other things) shows you the image.
To get a link to the image itself, try https://www.dropbox.com/s/set461kj7rt1zv5/ServiceBrownCog.png?raw=1. For more details, see https://www.dropbox.com/help/201.
I want to get a map (I only need a picture) that has the road network
but without labels (text on the map). I tried to get such a map from Google API and thought "element:geometry"
works.
But, for example, this link is still full of texts.
How can I obtain a road network map (static picture is ok) without text labels?
Any provider is ok, e.g. Google, Yahoo, Mapquest...
Use this style:
style=feature:all|element:labels|visibility:off
it will hide all labels for all features.
http://maps.google.com/maps/api/staticmap?sensor=false&size=512x512¢er=Brooklyn&zoom=12&style=feature:all|element:labels|visibility:off
I got a better solution:
Create a html file and insert the code below.
<!DOCTYPE html>
<html>
<head>
<title>Mapa GMR Norte</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var customMapType = new google.maps.StyledMapType([
{
elementType: 'labels',
stylers: [{visibility: 'off'}]
}
], {
name: 'Custom Style'
});
var customMapTypeId = 'custom_style';
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: 41.4416459, lng: -8.2911885}, // Brooklyn.
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, customMapTypeId]
}
});
map.mapTypes.set(customMapTypeId, customMapType);
map.setMapTypeId(customMapTypeId);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"
async defer></script>
</body>
</html>
Hope it helps! :)
The Google Maps Styled Map Wizard (link below) will allow you to remove labels (and also make tons of other customizations).
https://mapstyle.withgoogle.com/
This is the documentation on map styling for the JavaScript API. There's also a Styled Map Wizard that lets you play with the styles to get exactly what you want.
by "I only need a picture" I take it you don't need to access to API, Google Inc devs still didn't a chance to apply all the features from the old maps to the new design.
However you can still access it by going to https://maps.google.com/?output=classic
and you can go to settings and customise "tick labels off" and so forth...
When I am printing google map; it does not print icons; how can I print complete google map
I am using google maps api v3 for javascript
There are several other questions addressing this issue:
How to print Google Map markers
The short, the Google Maps Javascript API doesn't print overlays (markers, lines) correctly or at all. You can use the Google Maps Static API, but you will be limited to the amount of overlays you draw on the map. This is, however, the best way to get a reliable print.
The long, the markers have the class 'gmnoprint', which disables them from showing up on the printed rendering. You can iterate through the markers and remove this class, which should allow them to be printed on the page. As far as I know, this will not work for the direction lines.
many days trying print the icons and routes, so finally i did it!!!!!!!!
i found a js script that convert html to canvas and i thought that will be the solution but unfortunately it wasn't at all.
if found that, when i use it and says to the browser to print the page finally show it!!!! but the canvas again doesn't show the icons ¿...?
so i just executed the script at the on load and append the result canvas into a div behind the map (if you put display:none don't work!). sorry by my english :)
here a bit code:
<div id="imprimir">
<h1><?php echo $direccion;?></h1>
<div id="distancia"></div>
<div id="map-canvas" style="margin: 0;padding: 0; height: 550px;z-index:10"></div>
<div id="captura" style="position:absolute;top:100px;left:50px;"></div>
</div>
//------------ ...
Google Map code here
//------------ ...
<script>
html2canvas($("#imprimir"), {
onrendered: function(canvas) {
$("#captura").html(canvas);
}
});
</script>
well, i hope this help you!!!
$("#btnPrint").click(function () {
var contents = $("#map_canvas").html();
var frame1 = $('<iframe />');
frame1[0].name = "frame1";
frame1.css({ "position": "absolute", "top": "-1000000px" });
$("body").append(frame1);
var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
frameDoc.document.open();
//Create a new HTML document.
frameDoc.document.write('<html><head><title>DIV Contents</title>');
frameDoc.document.write('</head><body>');
//Append the external CSS file.
frameDoc.document.write('<link href="style.css" rel="stylesheet" type="text/css" />');
//Append the DIV contents.
frameDoc.document.write(contents);
frameDoc.document.write('</body></html>');
frameDoc.document.close();
setTimeout(function () {
window.frames["frame1"].focus();
window.frames["frame1"].print();
frame1.remove();
}, 500);
});