MapFont - OpenLayer integration

by Dmitry Kosatchev

HTML

<!--style-->
<link href="//mapfont.org/css/mapfont.css" rel="stylesheet">

<h2>OpenLayer integration</h2>
<div>
	<div id="openlayer"></div>
</div>

<!--OpenLayers API-->
<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>

CSS

h2 {
	font-family: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 100;
	margin-bottom: 10px;
	font-size: 25px;
	color: #1568b1;
}
#openlayer {
	height: 400px;
}

JavaScript

function olInit() {

	// The overlay layer for our marker, with font symbol
	var pointLayer = new OpenLayers.Layer.Vector('Overlay', {
		styleMap: new OpenLayers.StyleMap({
			'default': {
				fill: false,
				stroke: false,
				label: "\uf031", //Use \u and unicode index
				//labelAlign: "cb",
				labelXOffset: 0,
				labelYOffset: 0,
				fontColor: "#000000",
				fontSize:"20px",
				fontOpacity: 1,
				fontFamily: "MapFont",
				labelOutlineWidth: 2
			}
		})
	});
	
	// We add the marker with a tooltip text to the overlay		
	pointLayer.addFeatures([
		new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(65.523, 57.145).transform('EPSG:4326', 'EPSG:3857'), {tooltip: 'OpenLayers'})
	]);
	
	// Finally we create the map
	var olMap = new OpenLayers.Map({
		div: "openlayer",
		projection: "EPSG:3857",
		layers: [new OpenLayers.Layer.OSM(), pointLayer],
		center: (new OpenLayers.LonLat(65.523, 57.145).transform('EPSG:4326', 'EPSG:3857')),
		zoom: 14,
		minResolution: "auto",
		maxResolution: "auto",
	});
	
}

olInit();