When I specify the style attribute to the vector layer, firefox does not render the vectors on that layer.
To test this, just execute the included javascript and html page.
You'll see an EditingToolbar on the top right corner, try to draw a LineString with it using firefox.
What you'll discover is that the LineStrings do not appear on the layer at all.
Try to remove the styleMap attribute from the vectors layer and everything will work correctly.
If you know the reason for this problem, please let me know.
Thank you for your time and help in advance.
P.S
Also, you'll have to use your own OpenLayers library and link up to it from the html page.
Personally I'm using the latest version from GitHub because the other versions have another annoying bug:
There's a dialogue from google maps poping up constantly.
function initialize(){
new Map();
}
function Map(){
this.map;
this.editing_toolbar;
this.vectors;
this.epsg900913 = new OpenLayers.Projection('EPSG:900913');
this.epsg4326 = new OpenLayers.Projection('EPSG:4326');
this.line_control;
this.renderer;
this.line_control,this.renderer=OpenLayers.Util.getParameters(window.location.href).renderer;
this.renderer= (this.renderer) ? [this.renderer] : OpenLayers.Layer.Vector.prototype.renderers;
// Create the map object
this.map = new OpenLayers.Map('map');
//Create a Google layer
var gmap = new OpenLayers.Layer.Google(
"Google Streets", // the default
{
numZoomLevels: 30,
projection: new OpenLayers.Projection("EPSG:900913")
}
);
var my_style=new OpenLayers.StyleMap({
"default":new OpenLayers.Style({
strokeWidth:5,
fillColor:"1484e6",
strokeColor:"1484e6"
}),
"select":new OpenLayers.Style({
fillColor:"e39119",
strokeColor:"e39119"
})
});
this.vectors= new OpenLayers.Layer.Vector(
"Vector Layer",
{styleMap:my_style,
renderers:this.renderer
}
);
this.map.addLayers([gmap,this.vectors]);
this.editing_toolbar=new OpenLayers.Control.EditingToolbar(this.vectors);
this.map.addControl(this.editing_toolbar);
this.map.addControl(new OpenLayers.Control.LayerSwitcher());
this.map.addControl(new OpenLayers.Control.MousePosition());
this.map.setCenter(new OpenLayers.LonLat(-123.12, 49.28).transform(this.epsg4326, this.epsg900913), 13);
}
<html>
<head>
<title>OpenLayers: Google Layer Example</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyAt66skA87gnWvy7UQl065zFaFHNXJiBc4&sensor=false"></script>
<script type="text/javascript" src="/static/open_layers/lib/OpenLayers.js"></script>
<script type="text/javascript" src="/static/firefox_bug.js"></script>
</head>
<body onload="initialize()">
<div id="map" class="smallmap"></div>
</body>
</html>
Related
I am trying to draw various polygons on a map using geojson files. How do I go about doing this?
I am using version 3 and have copied the example code but it isn't working. I have tried linking more of the javascript source files and even tried making the shape manually with the polygon function but that didn't work either.
var platform = new H.service.Platform({
app_id: 'xxxxxxxxxxx',
app_code: 'xxxxxxxxxxxxx',
useCIT: true,
useHTTPS: true
})
var defaultLayers = platform.createDefaultLayers()
// Initialize a map - this map is centered over Europe
var map = new H.Map(document.getElementById('map'),
defaultLayers.normal.map, {
center: {
lat: 102
lng: 50
},
zoom: 9,
pixelRatio: window.devicePixelRatio || 1
})
console.log(map)
this.map = map
// Add a resize listener to make sure that the map occupies the whole container
window.addEventListener('resize', () => map.getViewPort().resize())
var reader = new H.data.geojson.Reader('./path/to/file.json');
reader.parse();
this.map.addLayer(reader.getLayer());
}
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-data.js"></script>
I expect the polygon to be drawn on the map like it does on a site like geojson.com, but all I get is this error in the console: ('cannot read property 'geojson' of undefined'). The map and everything else works fine.
I suspect it's something to do with H.data being undefined. But I'm not sure why that would be. Any ideas?
I apologise if this is hard to read, I haven't done one before. Thanks for the help.
If you are going to use HERE Map API Version 3.1, please see below quick start tutorial.
https://developer.here.com/documentation/maps/topics/quick-start.html
You need to use APIKEY instead of APP_CODE and APP_ID.
var platform = new H.service.Platform({
'apikey': 'API-KEY'
});
Change base layer object to below.
defaultLayers.normal.map -> defaultLayers.vector.normal.map
You need to put ',' and might to switch lng and lat in center property.
center: {
lng: 102,
lat: 50
},
I hope this help.
I am building a WordPress plugin that involves the use of maps and user created custom markers. I want to separate the map from the marker so that a user can create custom markers cross map platform and keep the marker data on there WordPress page.
I set up a development server on a raspberry pi 3 B, with a 2 Terabyte hard drive that it boots from. I set up an OpenStreetMap tile server of North America to practice on and I got it up and through and html file in my /var/www/html that runs through a LAMP server that also includes my WordPress development web server.
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Public Transport Lines - ÖV-Linien - openptmap.org</title>
<link rel="shortcut icon" href="favicon_pt.png">
<link rel="stylesheet" href="style.css" type="text/css">
<style> /* avoid empty tiles */ .olImageLoadError {display: none;}
</style>
<script src="OpenLayers.js" type="text/javascript"></script>
<script src="OpenStreetMap.js" type="text/javascript"></script>
<script type="text/javascript">
var map;
function init() {
// The overlay layer for our marker, with a simple diamond as symbol
var overlay = new OpenLayers.Layer.Vector('Overlay', {
styleMap: new OpenLayers.StyleMap({
externalGraphic: '../img/marker.png',
graphicWidth: 20, graphicHeight: 24, graphicYOffset: -24,
title: '${tooltip}'
})
});
// The location of our marker and popup. We usually think in geographic
// coordinates ('EPSG:4326'), but the map is projected ('EPSG:3857').
var myLocation = new OpenLayers.Geometry.Point(10.2, 48.9)
.transform('EPSG:4326', 'EPSG:3857');
// We add the marker with a tooltip text to the overlay
overlay.addFeatures([
new OpenLayers.Feature.Vector(myLocation, {tooltip: 'OpenLayers'})
]);
// A popup with some information about our location
var popup = new OpenLayers.Popup.FramedCloud("Popup",
myLocation.getBounds().getCenterLonLat(), null,
'<a target="_blank" href="http://openlayers.org/">We</a> ' +
'could be here.<br>Or elsewhere.', null,
true // <-- true if we want a close (X) button, false otherwise
);
// Finally we create the map
map = new OpenLayers.Map({
div: "map", projection: "EPSG:3857",
layers: [new OpenLayers.Layer.OSM(), overlay],
center: myLocation.getBounds().getCenterLonLat(), zoom: 15
});
// and add the popup to it.
map.addPopup(popup);
}
</script>
</head>
<body onload="init();">
<div style="width:100%; height:100%;" id="map"></div><br></body>
</html>
This is an example of the example marker that I created which I can use a short code to link to in my plugin, but I can't get scripts to run in the plugin itself with results on the map.
For example when I run this script in my plugin attached to just a plain map.html iframe it doesn't do anything.
I am creating a map that consists of three maps and markers total that can be switched between like in this leaflet example, although when I test it, instead of the each map rendering as a single version filling the map frame they display as many multiple in a tile layout. Below is my code I am currently using, note that the images I am using for the maps are not actually maps thus I am using the 'L.CRS.Simple'.
This is the result I was expecting (sans the makers and with my images), maybe someone can spot where I went wrong?
-
<html>
<head>
<title>Interactive Map</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
<style>
#map {
width: 1000px;
height: 1000px;
}
</style>
</head>
<body>
<div id="map">
<script>
var map1 = L.tileLayer('map1.png');
var map2 = L.tileLayer('map2.png');
var map3 = L.tileLayer('map3.png');
var markers = L.layerGroup(); //Leaving empty for the time being, using just to create check box in menu
var map = L.map('map', {
crs: L.CRS.Simple,
layers: [map1, map2, map3, markers],
maxZoom: 5
});
var baseMaps = {
"Map 1": map1,
"Map 2": map2,
"Map 3": map3
};
var overlayMaps = {
"Markers": markers
};
var bounds = [[0,0], [1000,1000]];
L.control.layers(baseMaps, overlayMaps, bounds).addTo(map);
map.fitBounds(bounds);
</script>
</div>
</body>
Yes, I am using locally stored images, no, I do not have images setup to use the standard URL format, if you choose to try my code just sub in 3 random pictures.
Here is a pic of what is occurring:
You forgot a 's' to markers
var overlayMaps = {
"Markers": markers
};
It should work now ;)
I have requirement to show place on map using lat and long on open street map with markers. I I have tried some code after searching in Google. But showing nothing. I am providing my code and some example link which i have tried.
<head runat="server">
<title>OpenLayers Simplest Example</title>
<script src="OpenLayers.js" type="text/javascript"></script>
<script src="osm-marker-popup.js" type="text/javascript"></script>
</head>
<body onload="init()">
<form id="form1" runat="server">
<h1 id="title">
OSM with Marker and Popup</h1>
<p id="shortdesc">
Demonstrate use of an OSM layer with a marker and a popup.
</p>
<div id="tags">
openstreetmap osm marker popup
</div>
<div id="map">
</div>
<div id="docs">
<p>
A common use case for OpenLayers is to display a marker at a location on the map,
and add some information in a popup. It is also easy to add a tooltip with a short
description. See the <a href="osm-marker-popup.js" target="_blank">osm-marker-popup.js
source</a> to see how this is done.
</p>
</div>
</form>
Code of osm-marker-popup.js
var map;
function init() {
// The overlay layer for our marker, with a simple diamond as symbol
var overlay = new OpenLayers.Layer.Vector('Overlay', {
styleMap: new OpenLayers.StyleMap({
externalGraphic: '../img/marker.png',
graphicWidth: 20, graphicHeight: 24, graphicYOffset: -24,
title: '${tooltip}'
})
});
// The location of our marker and popup. We usually think in geographic
// coordinates ('EPSG:4326'), but the map is projected ('EPSG:3857').
var myLocation = new OpenLayers.Geometry.Point(10.2, 48.9)
.transform('EPSG:4326', 'EPSG:3857');
// We add the marker with a tooltip text to the overlay
overlay.addFeatures([
new OpenLayers.Feature.Vector(myLocation, { tooltip: 'OpenLayers' })
]);
// A popup with some information about our location
var popup = new OpenLayers.Popup.FramedCloud("Popup",
myLocation.getBounds().getCenterLonLat(), null,
'<a target="_blank" href="http://openlayers.org/">We</a> ' +
'could be here.<br>Or elsewhere.', null,
true // <-- true if we want a close (X) button, false otherwise
);
// Finally we create the map
map = new OpenLayers.Map({
div: "map", projection: "EPSG:3857",
layers: [new OpenLayers.Layer.OSM(), overlay],
center: myLocation.getBounds().getCenterLonLat(), zoom: 15
});
// and add the popup to it.
map.addPopup(popup);
}
Links.
http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example
http://wiki.openstreetmap.org/wiki/Openlayers_POI_layer_example
http://wiki.openstreetmap.org/wiki/OpenLayers_Marker
change
<script src="OpenLayers.js" type="text/javascript"></script>
to
<script src="http://openlayers.org/api/OpenLayers.js"></script>
I've got the following typescript class that produces a google map instance. I'm new to javascript / typescript and HTML!
/// <reference path="./google.maps.d.ts" />
module Mapping {
export class GoogleMap implements IMap {
public name: string;
private map: any;
private options: any;
constructor (mapDiv: Element) {
this.name = "GoogleMap";
this.options = {center: new google.maps.LatLng(53.83305, -1.66412), zoom: 3, MapTypeId: 'terrian' };
this.map = new google.maps.Map(mapDiv, this.options);
}
}
}
and in my view, I have the following ;
<!DOCTYPE html>
<html>
<head><title>TypeScript Mapping</title></head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MyKEYGOESHERE&sensor=false"></script>
<script type="text/javascript" src="~/scripts/require.js"></script>
<script type="text/javascript" src="~/typings/Mapping.js"></script>
<script type="text/javascript">
function initialize() {
var mapCanvas = document.getElementById("map");
Mapping.GoogleMap(mapCanvas);
}
</script>
<body onload="initialize()">
<div id="map" style="height: 512px; width: 512px;"></div>
</body>
</html>
All I get at runtime is a grey box, dragging inside this box changes the pointer to the hand pointer so it looks like the control has been created ok just not showing any maps details.
Anybody got any ideas?
Thanks in advance.
Just to echo the finding from the comments:
It looks like your map options are defined incorrectly. Try...
constructor (mapDiv: Element) {
this.name = "GoogleMap";
this.options = {
center: new google.maps.LatLng(53.83305, -1.66412),
zoom: 3,
MapTypeId: google.maps.MapTypeId.TERRAIN
};
this.map = new google.maps.Map(mapDiv, this.options);
}
Answer:
Google's MapTypeId is an constant so you can directly go for the property here like:
google.maps.MapTypeId.CONSTANT
Currently they support 4 Types:
Constant - Description
HYBRID - Displays a photographic map + roads and city names
ROADMAP - Displays a normal, default 2D map
SATELLITE - Displays a photographic map
TERRAIN - Displays a map with mountains, rivers, etc.
Addon:
I've created a short Demo Application in TypeScript for a Google Maps in an TypeScript Application/Page:
https://github.com/DominikAngerer/typescript-google-maps
It currently support:
Default Google Maps
SnazzyMap Support (simply replace your SnazzyMap with the one I configured in the SnazzyMaps.ts)
Default Center Object
Free Geo IP Location (10.000 Request per Hour)
New Default Icon /images/icon.png
New Default Icon as .PSD /images/icon.psd
No jQuery Needed
Generated Test Data from Json-Generator.com
InfoBox JS Plugin
Infobox Example
Template example for InfoBoxes
Full bower support
On the todo is also typings support, so issue's as you got there shouldn't happen again.