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 : ....
Related
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 :)
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.
am making a Createjs and html5 project in which I am drawing a shape(Red circle), when I click over the circle it gives alert. It works fine on all desktops and android phones. Except when I open this in a windows phone it works fine on the normal screen but when I zoom the screen it loses it working, an alert is shown when I click anywhere on the screen(maybe where the co-ordinates of the shape resides) but not when I click over the shape(Circle),,
Your help is appreciated
my demo.html
<!DOCTYPE html>
<html>
<head><title></title>
<script type="text/javascript" src="createjs-2013.12.12.min.js"></script>
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript">
function init() {
var stage = new createjs.Stage("demoCanvas");
var circle = new createjs.Shape();
createjs.Touch.enable(stage);
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
circle.addEventListener("click", function(evt) { /*$("span#log").text(circle.x);*/ alert('clicked'); });
stage.addChild(circle);
stage.update();
}
</script>
</head>
<body onLoad="init();">
<span id="log"></span>
<br>
<canvas id="demoCanvas" width="500" height="300">
alternate content
</canvas>
</body>
</html>..
Here's the project
Not sure if this is relevant as haven't looked at sample code, but I think createjs.Touch.enable works on Stage instances rather than DisplayObjects
See here
I do alot of Research over this topic, and at the end i came to this point that this the
BUG in IE11 . Hope Microsoft helps to solve this.
I came across this when I did a search on SO:
Zip Code to City/State and vice-versa in a database?
But I'm wondering, why can't we just use the Maps APIs for this? Has anyone tried doing this?
use the google maps api Geocoder
Yes, it's pretty easy to do it with Google Maps Geocoding getLocations().
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Geocoding example</title>
<script src="http://maps.google.com/maps?file=api&v=2" type="text/javascript"></script>
<script type="text/javascript">
var geocoder;
var map;
var address = "10001"; //NEW YORK zip
function load()
{
map = new GMap2(document.getElementById("map"));
geocoder = new GClientGeocoder();
geocoder.getLocations(address, addToMap);
}
function addToMap(response)
{
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1],place.Point.coordinates[0]);
map.setCenter(point, 13);
marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(place.address);
}
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 500px"></div>
</body>
</html>
You could give it a try online on Google code playground.
Have fun!
It's pretty easy to use the Geonames webservice apis for this, specifically the postalCodeSearch method. Works great in my experience unless you're issuing multiple queries/second, although caching results is generally worthwhile. (ie: they do not change frequently.)