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.
Related
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)
I am new in web mapping, but I have great interest in it. I would like to ask for your help, I have encountered a problem regarding on applying wms layer into my website(html), here is my code:
I have an OSM base layer. but when I run this the output will only show a pink tile.
I don't know what is wrong or what to do. it would really help me a lot if someone can help me with this. thank you and regards.
oh, here is the code I have edited it, changed the layer into layers, but still the output is the same.
<html>
<head>
<title>OpenLayers Example</title>
<script src="./Javascripts/OpenLayers-2.13.1/OpenLayers.js"></script>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script defer="defer" type="text/javascript">
var map = new OpenLayers.Map('map');
var osm = new OpenLayers.Layer.OSM();
var dm_wms = new OpenLayers.Layer.WMS(
"zambo_data",
"http://localhost:8080/geoserver/zamboanga/wms",
{
layers: 'zamboanga:zam1',
transparent: 'true',
format:'img/png'
},
{isBaseLayer: false, projection:'ESPG:4326'}
);
map.addLayers([osm,dm_wms]);
map.zoomToMaxExtent();
</script>
It should be layers:"zamboanga:zam1", not layer : ....
Hi i've been attempting to load Googlemaps onto the page when the user clicks on the link. I've been attempting to follow Using google maps with angularjs and angular ui but the map doesn't appear. On localhost, the error i get is: no module:map testing. What does no module here imply? I keep running into such errors. It works on JSfiddle for some reason...The working example.
Html file:
<div ng-app='maptesting'>
<div ng-controller="MapCtrl">
<div id="map_canvas" ui-map="myMap"
style="height:300px;width:400px;border:2px solid #777777;margin:3px; border:1px solid"
ui-options="mapOptions"
ui-event="{'map-idle' : 'onMapIdle()'}"
>
</div>
<!--In addition to creating the markers on the map, div elements with existing google.maps.Marker object should be created to hook up with events -->
<div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]"
ui-event="{'map-click': 'markerClicked(marker)'}">
</div>
</div>
</div>
The javascript file:
//Add the requried module 'angular-ui' as a dependency
angular.module('maptesting', ['ui.map','ui.event']);
function MapCtrl($scope) {
var ll = new google.maps.LatLng(13.0810, 80.2740);
$scope.mapOptions = {
center: ll,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//Markers should be added after map is loaded
$scope.onMapIdle = function() {
if ($scope.myMarkers === undefined){
var marker = new google.maps.Marker({
map: $scope.myMap,
position: ll
});
$scope.myMarkers = [marker, ];
}
};
$scope.markerClicked = function(m) {
window.alert("clicked");
};
}
Live example:
On plunker: here
On JSfiddle: here.
On another note, would it be better to code the google maps and angularjs integration using angularui, from scratch or using google maps with angular? The anuglarui one looks great but when i tried it it didn't work too. I read in a google circle that it wasn't updated for a while which could be why it isn't working well.
Answer:
Yep all I was missing were the script tags. Namely:
<script src="http://www.flocations.com/static/vendor/angular-ui/event/event.js"></script>
<script src="http://www.flocations.com/static/vendor/angular-ui/map/ui-map.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
Your Plunk doesn't have <script></script> elements for ui.map or ui.event. For example, you might want to include these in your <head>:
<script src="ui-event.js"></script>
<script src="ui-map.js"></script>
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);
});