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.
Related
I am interested in Azure Maps' animation library. After setting up an account and initialized the map. I found out that the coordinates I put as parameters aren't the ones it shows.
For Example I currently live in Tunisia. So I've set up the center coordinates to (36.800697, 10.181198).
But, the map gets centered at Addis Ababa for some reason. I am currently following their code example "Animate marker along path". [Github link][1] As you can see I have set up a bunch of mock coordinates.
PS: In the following example, I will mask my key.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animate marker along path - Azure Maps Web SDK Samples</title>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico"/>
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="This sample shows how to easily animate a HTML marker along a path on the map." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, animation, animate, animations, point, symbol, pushpin, marker, pin" />
<meta name="author" content="Microsoft Azure Maps" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2.0/atlas.min.css">
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
<!-- Add reference to the animation module. -->
<script src="../Common/scripts/azure-maps-animations.min.js"></script>
<script type='text/javascript'>
var map, marker, animation;
//Create an array of points to define a path to animate along.
var path = [
[36.80067, 10.19111],
[36.80081, 10.19077],
[36.80148, 10.19548],
[36.83469, 10.30360]
];
function GetMap() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
center: [36.817421, 10.305192],
zoom: 13,
view: 'Auto',
//Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<key>'
}
});
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Add a line for the path as a visual reference.
datasource.add(new atlas.data.LineString(path));
//Add a layer for rendering line data.
map.layers.add(new atlas.layer.LineLayer(datasource));
//Create a marker and add it to the map.
marker = new atlas.HtmlMarker({
position: [-122.33825, 47.53945]
});
map.markers.add(marker);
map.events.add('click', function () {
if (animation) {
//Restart the animation.
animation.reset();
animation.play();
} else {
animation = atlas.animations.moveAlongPath(path, marker, { duration: 2000, captureMetadata: true, autoPlay: true });
}
});
});
}
</script>
</head>
<body onload="GetMap()">
<div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
<div style="position:absolute;top:0px;left:calc(50% - 100px);background-color:white;padding:5px;">Click the map to animate marker.</div>
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
<legend><h1 style="font-size:16px">Animate marker along path</h1></legend>
This sample shows how to easily animate a HTML marker along a path on the map.
This sample uses the open source Azure Maps Animation module
</fieldset>
</body>
</html>
You inverted longitude and latitude. The azure-maps library expects the longitude first :
map = new atlas.Map('myMap', {
center: [10.305192, 36.817421],
zoom: 13,
view: 'Auto',
//Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<key>'
}
});
I am succesfully implementing the HERE Javascript API for my web app. I wanted to lighten the map presentation, so I first tried to create my own map style as presented on this guide.
The examples given work fine but I could not tune it as I wish without malfunctioning (I guess indentation is the problem but I could not verify it despite hours of trying). I could not find any "Map styling file generator" so I almost gave up until I found these:
How to remove all colors from Here Maps base layer?; and
Here JavaScript 3.0 API - decent color scheme
Unfortunately, the given code in these answers does not work:
//Instead of using the default layers...
//var defaultLayers = platform.createDefaultLayers();
//...create your own layer (with e.g. the "reduced" scheme
var reduced = platform.getMapTileService({
type: 'base'
}).createTileLayer("maptile", "reduced.day", 256, "png8");
//Initialize a map using your custom map tile layer
var map = new H.Map(document.getElementById('mapp'), reduced, {
center: {
lat: 52.3,
lng: 13.8
},
zoom: 10
});
whereas the defaultLayers.vector.normal.map and the reduced objects seems to be the same kind of objects, using the defaultLayers get me the default map and using the reduced Layout just get me a blank map without errors on console but those GET type Errors:
mapsjs-core.js:33 GET https://1.base.hereapi.com/maptile/2.1/info?xnlp=CL_JSMv3.1.0.3&apikey=[My credentials]&output=json net::ERR_NAME_NOT_RESOLVED
d # mapsjs-core.js:33
ic # mapsjs-core.js:34
application/json # mapsjs-core.js:70
af.yj # mapsjs-core.js:69
(anonymous) # mapsjs-core.js:44
(anonymous) # mapsjs-core.js:44
zj # mapsjs-core.js:44
add # mapsjs-core.js:44
rd # mapsjs-core.js:43
af # mapsjs-core.js:69
n.ga # VM2398:15
n.hh # VM2398:18
tn # VM2398:14
T.vb # VM2398:14
T.th # VM2398:20
(anonymous) # script.js:60
Below is my complete code :
///### Credentials
// Identification service, this key only work on present domain.
var platform = new H.service.Platform({
'apikey': '[Well .. my credentials]'
});
///### Map setup
//...create your own layer (with e.g. the "reduced" scheme
var reduced = platform.getMapTileService({
type: 'base'
}).createTileLayer("maptile", "reduced.day", 256, "png8");
//Step 2: initialize a map using your custom map tile layer
var map = new H.Map(document.getElementById('map'), reduced, {
center: {
lat: 52.3,
lng: 13.8
},
zoom: 10
});
///### Map Interaction
// Add a resize listener to make sure that the map occupies the whole container
window.addEventListener('resize', () => map.getViewPort().resize());
// Set the map interactive
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// Create the default UI:
var ui = H.ui.UI.createDefault(map, defaultLayers ,'es-ES');
Maybe the statement for getting Map Tiles has changed?
You should use js version 3.0 to make your code worked instead of 3.1
Does this work for you?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1533195059" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
</head>
<body>
<div id="map" style="position:absolute; width:100%; height:100%; background:grey" ></div>
<!--<div id="panel" style="position:absolute; width:49%; left:51%; height:100%; background:inherit" ></div>-->
<script type="text/javascript" charset="UTF-8" >
//Step 1: initialize communication with the platform
var platform = new H.service.Platform({
app_id: 'DemoAppId01082013GAL',
app_code: 'AJKnXv84fjrb0KIHawS0Tg',
useCIT: true
});
//Instead of using the default layers...
//var defaultLayers = platform.createDefaultLayers();
//...create your own layer (with e.g. the "reduced" scheme
var reduced = platform.getMapTileService({
type: 'base'
}).createTileLayer("maptile", "reduced.day", 256, "png8");
//Step 2: initialize a map using your custom map tile layer
var map = new H.Map(document.getElementById('map'), reduced, {
center: {
lat: 52.3,
lng: 13.8
},
zoom: 10
});
//Step 3: make the map interactive
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
</script>
</body>
</html>
I just made your source code worked.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0,
width=device-width" />
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"
type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css"
href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
</head>
<body>
<div style="width: 640px; height: 480px" id="mapContainer"></div>
<script type="text/javascript" charset="utf-8">
var style = `
sources:
omv:
type: OMV
max_zoom: 17
min_display_zoom: 1
scene:
background:
color: [1.000, 1.000, 1.000, 1.00]
layers:
water_areas:
data: {source: omv, layer: water}
draw:
polygons:
order: 1 # z-order of the layer
color: [0.055, 0.604, 0.914, 1.00]
road:
data: {source: omv, layer: roads}
draw:
lines:
order: 2
color: [0.561, 0.561, 0.561, 1.00]
width: 15
major_road:
filter:
kind: 'major_road'
draw:
lines:
color: [0.882, 0.553, 0.086, 1.00]
width: 5px
`;
//Initialize the Platform object:
var platform = new H.service.Platform({
'apikey': 'APIKEY'
});
// Get the default map types from the Platform object:
var defaultLayers = platform.createDefaultLayers();
// Instantiate the map:
var map = new H.Map(
document.getElementById('mapContainer'),
defaultLayers.vector.normal.map,
{
zoom: 10,
center: { lng: 13.8, lat: 52.3 }
});
var baseLayer = map.getBaseLayer();
baseLayer.getProvider().setStyle(new H.map.Style(style));
</script>
</body>
</html>
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>
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>
I'm trying to migrate my application to latest version of Google map API and found that Google appends it's own items by default from Google Places directory to the map.
It does not look right together with my own records as it creates duplicate items on the map which can be placed in correctly.
Is there an option how to hide this local businesses or to control what is shown and what is not?
here is sample code:
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<style type="text/css">
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
function initialize() {
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(37.422833333333,25.323166666667),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
As you can see on map, there are few tiny icons, which you can click on and information would appear in bubble. I need to hide this icons or at least disable on click event for this items.
Just a pointer - this seems possible with custom styled maps. If I'm not mistaken, the feature type you're looking for would be poi.business, whose visiblity you would turn off.
There's a wizard to help you build the options array.
You can remove it by adding the following code:
var styles = [
{
featureType: "poi",
stylers: [
{ visibility: "off" }
]
}
];
var styledMap = new google.maps.StyledMapType(styles,{name: "Styled Map"});