(function(window, jQuery) {
'use strict';
var points = [
{ 'name' : '大洗 まいわい市場', 'point' : { 'lon' : 140.569693, 'lat' : 36.309830 } },
{ 'name' : '肴屋本店', 'point' : { 'lon' : 140.574143, 'lat' : 36.315018 } },
{ 'name' : '磯前神社', 'point' : { 'lon' : 140.587425, 'lat' : 36.315858 } },
{ 'name' : '大洗駅', 'point' : { 'lon' : 140.562624, 'lat' : 36.315675 } }
];
var OpenLayers = window.OpenLayers;
var projection4326 = new OpenLayers.Projection('EPSG:4326');
var projection900913 = new OpenLayers.Projection('EPSG:900913');
var labelStyleMap = new OpenLayers.StyleMap({'default':{
strokeColor: "#00FF00",
strokeOpacity: 1,
strokeWidth: 3,
fillColor: "#FF5500",
fillOpacity: 0.5,
pointRadius: 6,
pointerEvents: "visiblePainted",
label : "name: ${name}",
fontColor: "red",
fontSize: "12px",
fontFamily: "Courier New, monospace",
fontWeight: "bold",
labelAlign: "lt",
labelXOffset: "0",
labelYOffset: "-5",
labelOutlineColor: "white",
labelOutlineWidth: 3
}});
var nonLabelStyleMap = new OpenLayers.StyleMap({'default':{
strokeColor: "#00FF00",
strokeOpacity: 1,
strokeWidth: 3,
fillColor: "#FF5500",
fillOpacity: 0.5,
pointRadius: 6,
pointerEvents: "visiblePainted",
fontColor: "red",
fontSize: "12px",
fontFamily: "Courier New, monospace",
fontWeight: "bold",
labelAlign: "lt",
labelXOffset: "0",
labelYOffset: "-5",
labelOutlineColor: "white",
labelOutlineWidth: 3
}});
var map = new OpenLayers.Map({
div : 'map_canvas',
displayProjection : projection4326,
projection : projection900913,
});
var osmLayer = new OpenLayers.Layer.XYZ('OSM',
[
'//a.tile.openstreetmap.org/${z}/${x}/${y}.png',
'//b.tile.openstreetmap.org/${z}/${x}/${y}.png',
'//c.tile.openstreetmap.org/${z}/${x}/${y}.png'
],
{
numZoomLevels:6,
zoomOffset : 14,
maxResolution: 9.554628533935547
}
);
var markerLayer = new OpenLayers.Layer.Vector('marker', {
styleMap : labelStyleMap
});
map.addLayers([osmLayer, markerLayer]);
var centerPoint = new OpenLayers.LonLat(140.5748486, 36.3134009)
.transform(projection4326, projection900913);
map.setCenter(centerPoint, 14);
for (var i = 0, len = points.length; i < len; ++i) {
var name = points[i].name;
var lonLat = points[i].point;
var vectorPoint = new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat);
vectorPoint.transform(projection4326, projection900913);
var vector = new OpenLayers.Feature.Vector(vectorPoint);
vector.attributes = {
name : name
};
markerLayer.addFeatures([vector]);
}
// Change Label Visibility
jQuery('#label_visible').on('change', function() {
if (this.checked) {
markerLayer.styleMap = labelStyleMap;
}
else {
markerLayer.styleMap = nonLabelStyleMap;
}
markerLayer.redraw();
});
})(window, window.jQuery);
<p>
<label><input id="label_visible" type="checkbox" checked />show label</label>
</p>
<div id="map_canvas"></div>
#map_canvas {
height: 350px;
width: 350px;
}
External resources loaded into this fiddle: