We are trying to save user generated markers to our leaflet map. We have the marker information (coordinates, name etc) all stored in our database. We know how to call database info and apply it to our page if it is plain text, but not as a marker to a map. Has anybody had experience with this?
sidenote: we are using pug and mongodb.
It does not sound any complicated to write inline JavaScript with pug:
How can I render inline JavaScript with Jade?
Docs: https://pugjs.org/language/plain-text.html#block-in-a-tag
Then follow the Leaflet tutorial to write the appropriate JavaScript to create Markers on a Map.
var map = L.map('map').setView([48.86, 2.35], 11);
L.marker([48.86, 2.35]).addTo(map);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<div id="map" style="height: 180px"></div>
You could translate in pug:
doctype html
html(lang="en")
head
link(rel='stylesheet', href='https://unpkg.com/leaflet#1.3.1/dist/leaflet.css')
script(src='https://unpkg.com/leaflet#1.3.1/dist/leaflet-src.js')
style.
#map {height: 180px;}
body
#map
script.
var map = L.map('map').setView([48.86, 2.35], 11);
L.marker([48.86, 2.35]).addTo(map);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
Interpolation should also work within the script. block (e.g. L.map([#{lat}, #{lng}])), but you might prefer handling arrays / objects, in which case you need unescaped interpolation, with other tools to stringify.
See for example: https://github.com/pugjs/pug/issues/396
!{stringify(variable)}
pug.renderFile('template.pug', {stringify: require('js-stringify')});
(using js-stringify)
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);
So far I have this:
<div class="map col-xs-12">
<sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
<sebm-map-polygon [paths]="paths"></sebm-map-polygon>
</sebm-google-map>
</div>
It gives me a square polygon on the map. But the idea is to have a map with clickable countries (that is, each country click will trigger an event and return some data).
I just started using the sebm google map for Angular 2, but it seems like the documentation is somewhat lacking in specifics.
I'm new to Angular and unsure how to approach this. Would you recommend using the sebm-map-polygon with the geojson data for all of the countries?
Sorry I know this is a general question, but figure it could be valuable in the context of Angular 2.
Try using Visualization: GeoChart
A geochart is a map of a country, a continent, or a region with areas identified in one of three ways:
The region mode colors whole regions, such as countries, provinces, or states.
The markers mode uses circles to designate regions that are scaled according to a value that you specify.
The text mode labels the regions with identifiers (e.g., "Russia" or "Asia").
A geochart is rendered within the browser using SVG or VML. Note that the geochart is not scrollable or draggable, and it's a line drawing rather than a terrain map; if you want any of that, consider a map visualization instead.
Here is the sample code:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['geochart']});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);
var options = {};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
You could also check the following for code implementation:
Use GeoCharts in Angularjs
Google Chart Tools AngularJS Directive Module
JSBin
angular2-google-chart
Angular 2 google chart
Hope this helps.
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 :)
Is there a way to insert an address into a link and have it bring up the street view?
For instance:
<img src="http://maps.google.com/?q=ADDRESSHERE&view=streetview" />
Street View now has a static images API. Here's an example:
http://maps.googleapis.com/maps/api/streetview?size=640x480&location=43.0635309,141.3253261&fov=120&heading=235&pitch=10&sensor=false
Here's the docs:
https://code.google.com/apis/maps/documentation/streetview/
2011:
2017:
Might be best to use Google Maps JavaScript API v3 to do it. See documentation and sample code at http://code.google.com/apis/maps/documentation/javascript/services.html#StreetView.
Here's code from that page (with a few extraneous bits removed) that displays a street view:
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API Example: Embedded StreetView</title>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var bryantPark = new google.maps.LatLng(37.869260, -122.254811);
var panoramaOptions = {
position:bryantPark,
pov: {
heading: 165,
pitch:0,
zoom:1
}
};
var myPano = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);
myPano.setVisible(true);
}
</script>
</head>
<body onload="initialize()">
<div id="pano" style="width: 425px; height: 240px"></div>
</body>
</html>
Note that the code uses latitude and longitude rather than address. If all you have is a street address, you can use Google's Geocoder object to convert an address to a LatLng object.
You can embed whole the Street View on your page. Use googlemaps GStreetviewPanorama object for that. You can look at the example here:
http://gmaps-samples.googlecode.com/svn/trunk/streetview/streetview_lazy.html
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);
});