using javascript import with openlayers - javascript

I'm trying to run this example code in my browser, so I saved the code at index.html at my computer, and while opening it at my browser I got nothing in the screen, with the below error at the console:
Uncaught SyntaxError: Unexpected identifier . line 13
Line 13 is:
import Map from 'ol/Map.js';
how can I fix it?

Thanks to #Mike, I rewrote it as below, and it worked:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v5.3.0/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v5.3.0/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
var imageStyle = new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({color: 'yellow'}),
stroke: new ol.style.Stroke({color: 'red', width: 1})
})
});
var headInnerImageStyle = new ol.style.Style({
image: new ol.style.Circle({
radius: 2,
fill: new ol.style.Fill({color: 'blue'})
})
});
var headOuterImageStyle = new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({color: 'black'})
})
});
var n = 200;
var omegaTheta = 30000; // Rotation period in ms
var R = 7e6;
var r = 2e6;
var p = 2e6;
map.on('postcompose', function(event) {
var vectorContext = event.vectorContext;
var frameState = event.frameState;
var theta = 2 * Math.PI * frameState.time / omegaTheta;
var coordinates = [];
var i;
for (i = 0; i < n; ++i) {
var t = theta + 2 * Math.PI * i / n;
var x = (R + r) * Math.cos(t) + p * Math.cos((R + r) * t / r);
var y = (R + r) * Math.sin(t) + p * Math.sin((R + r) * t / r);
coordinates.push([x, y]);
}
vectorContext.setStyle(imageStyle);
vectorContext.drawGeometry(new ol.geom.MultiPoint(coordinates));
var headPoint = new ol.geom.Point(coordinates[coordinates.length - 1]);
vectorContext.setStyle(headOuterImageStyle);
vectorContext.drawGeometry(headPoint);
vectorContext.setStyle(headInnerImageStyle);
vectorContext.drawGeometry(headPoint);
map.render();
});
map.render();
</script>
</body>
</html>

use this:
<html lang="en">
<head>
<title>Map</title>
<!-- -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/ol-geocoder#latest/dist/ol-geocoder.min.css" rel="stylesheet">
<!-- -->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ol-geocoder"></script>
<script type="text/javascript">
var layersGroup= new ol.layer.Tile({
title : 'OSM',
type : 'base',
visible : false,
source : new ol.source.OSM()
});
mapView = new ol.View({
center: [8415526,1301999],
zoom: 17
});
Printmap = new ol.Map({
layers: layersGroup ,
target: 'printmap',
view: mapView
});
</script>
</head>
<body>
<div class="page-container">
<div id="printmap" class="printmap"></div>
</div>
</body>
</html>

Related

Save Openlayers map as PDF (offline version)

I would like to save my openlayers map as PDF.
Unfortunately all the options I tried don't work.
The first option, I guess the easiest one was here:
https://jsfiddle.net/Ljnya5gp/1/
from which I developed something like this:
function createPdf() {
var doc = new jsPDF();
source = $('#map')[0];
specialElementHandlers = {
'#map': function (element, renderer) {
return true
}
};
doc.fromHTML(
source,
15,
15,
{
'width': 170,
'elementHandlers': specialElementHandlers
}
);
doc.save('Area 5 map - alterations.pdf')
but the script downloads only blank document for me.
I want to have this section downloaded (from index.html)
<div id="map">
<div id="popup" class="ol-popup">
<div id="popup-content"></div>
</div>
</div>
Why the output PDF document is blank? Is it caused by Map script, which is embedded into the HTML file?
My <div id="map"> refers to the script attached to the HTML file as the:
The jsfiddle can be found here:
https://jsfiddle.net/rjetdvyo/
Is it something which causes the problem too?
UPDATE:
Based on the answer below I formed something like this:
function createPdf() {
var mapElement = $("#map");
html2canvas(mapElement, {
useCORS: true,
onrendered: function (canvas) {
var img = canvas.toDataURL("image/jpeg,1.0");
var pdf = new jsPDF();
pdf.addImage(img, 'JPEG', 15, 40, 180, 180);
pdf.save('a4.pdf')
}
});
}
var map = (document.getElementById('map'), createPdf);
The printpdf button only refreshes the page.
I think everything is ok, it was showing blank because you didn't write any text into div. Have a look:
function createPdf() {
var doc = new jsPDF();
source = $('#map')[0];
specialElementHandlers = {
'#map': function (element, renderer) {
return true
}
};
doc.fromHTML(
source,
15,
15,
{
'width': 170,
'elementHandlers': specialElementHandlers
}
);
doc.save('Area 5 map - alterations.pdf')
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<div id="map">
<div id="popup" class="ol-popup">
Hello
<div id="popup-content"><h1>Hello, this is a H1 tag</h1></div>
</div>
</div>
<button onclick="createPdf()">generate PDF</button>
Update:
By using jsPDF and html2canvas both, you can achieve your goal.
html2canvas creates a canvas object from the DOM element. From canvas, you can create an image and finally convert that image into pdf by jsPDF. Have a look at the code below:
function createPdf() {
var mapElement = $("#map-canvas");
html2canvas(mapElement, {
useCORS: true,
onrendered: function (canvas) {
var img = canvas.toDataURL("image/jpeg,1.0");
var pdf = new jsPDF();
pdf.addImage(img, 'JPEG', 15, 40, 180, 180);
pdf.save('a4.pdf')
}
});
}
// if HTML DOM Element that contains the map is found...
if (document.getElementById('map-canvas')) {
// Coordinates to center the map
var myLatlng = new google.maps.LatLng(52.525595, 13.393085);
// Other options for the map, pretty much selfexplanatory
var mapOptions = {
zoom: 14,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Attach a map to the DOM Element, with the defined settings
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
#map-canvas {
width: 500px;
height: 400px;
}
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"
integrity="sha512-s/XK4vYVXTGeUSv4bRPOuxSDmDlTedEpMEcAQk0t/FMd9V6ft8iXdwSBxV0eD60c6w/tjotSlKu9J2AAW1ckTA=="
crossorigin="anonymous"></script>
<button onclick="createPdf()">generate PDF</button>
<div id="map-canvas"></div>
Update 2:
I don't know which ways you're following. Just follow these steps to get the job done:
Follow these steps first.
Replace your index.js code by this:
import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
const map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM()
})
],
view: new View({
center: [0, 0],
zoom: 0
})
});
var exportButton = document.getElementById('export-pdf');
exportButton.addEventListener(
'click',
function () {
exportButton.disabled = true;
document.body.style.cursor = 'progress';
// var format = [297, 210];
var resolution = 72; // The term 72 dpi(dots per inch) is used to express the resolution of a screen
var dim = [297, 210]; // a4 size's dimension
var width = Math.round((dim[0] * resolution) / 25.4);
var height = Math.round((dim[1] * resolution) / 25.4);
var size = map.getSize();
var viewResolution = map.getView().getResolution();
map.once('rendercomplete', function () {
var mapCanvas = document.createElement('canvas');
mapCanvas.width = width;
mapCanvas.height = height;
var mapContext = mapCanvas.getContext('2d');
Array.prototype.forEach.call(
document.querySelectorAll('.ol-layer canvas'),
function (canvas) {
if (canvas.width > 0) {
var opacity = canvas.parentNode.style.opacity;
mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
var transform = canvas.style.transform;
// Get the transform parameters from the style's transform matrix
var matrix = transform
.match(/^matrix\(([^\(]*)\)$/)[1]
.split(',')
.map(Number);
// Apply the transform to the export map context
CanvasRenderingContext2D.prototype.setTransform.apply(
mapContext,
matrix
);
mapContext.drawImage(canvas, 0, 0);
}
}
);
var pdf = new jsPDF('landscape');
pdf.addImage(
mapCanvas.toDataURL('image/jpeg'),
'JPEG',
0,
0,
dim[0],
dim[1]
);
pdf.save('map.pdf');
// Reset original map size
map.setSize(size);
map.getView().setResolution(viewResolution);
exportButton.disabled = false;
document.body.style.cursor = 'auto';
});
// Set print size
var printSize = [width, height];
map.setSize(printSize);
var scaling = Math.min(width / size[0], height / size[1]);
map.getView().setResolution(viewResolution / scaling);
},
false
);
Replace your index.html by this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Using Parcel with OpenLayers</title>
<style>
#map {
width: 400px;
height: 250px;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<button id="export-pdf" >Export PDF</button>
<div id="map"></div>
<script src="./index.js"></script>
</body>
</html>

Cannot set a texture to box (html5 / js / babylon.js)

I'm trying out Babylon.js. I want to set my floor texture but it doesn't work. I get the following error:
"Uncaught TypeError: _this.getScene is not a function" (for google search)
I really don't get this, the youtube tutorial made it seem so easy.
Source code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="https://cdn.babylonjs.com/babylon.max.js"></script>
<script>
window.addEventListener('DOMContentLoaded', function () {
var canvas = document.getElementById('canvas');
var engine = new BABYLON.Engine(canvas, true);
var createScene = function () {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3.White();
var floor = BABYLON.MeshBuilder.CreateBox("floor", { height: 25, width: 800, depth: 900 }, scene);
floor.position.y = -162.5;
floor.position.x = 100;
floor.position.z = 400;
var camera = new BABYLON.ArcRotateCamera(
'camera1',
BABYLON.Tools.ToRadians(45),
BABYLON.Tools.ToRadians(45),
1000.0,
new BABYLON.Vector3(0, 50, 400),
scene);
camera.attachControl(canvas, true);
var light = new BABYLON.PointLight("pointlight", new BABYLON.Vector3(800, 700, 1000), scene);
light.diffuse = new BABYLON.Color3(1, 1, 1);
var floormaterial = new BABYLON.StandardMaterial("floormaterial", scene);
floormaterial.diffuseTexture = BABYLON.Texture("floor.png", scene);
floor.material = floormaterial;
return scene;
};
var scene = createScene();
engine.runRenderLoop(function () {
scene.render();
});
});
</script>
</body>
</html>
If I remove the "floormaterial.diffuseTexture = BABYLON.Texture("floor.png", scene);" line everything works perfectly.
you are missing the new before the texture. the line should be:
floormaterial.diffuseTexture = new BABYLON.Texture("floor.png", scene);

Google Maps API Marker Not Working

I am trying to simply get a marker to display. I'm using Google's examples as a guide because this is the first time I am using Google Maps API. I can't find any syntax problems with the code below. Why is it not loading the marker?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100%; z-index: 0;}
#gmnoprint {width: auto;}
</style>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Map of Floor Plan</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function CustomMapType() {
}
CustomMapType.prototype.tileSize = new google.maps.Size(256,256);
CustomMapType.prototype.maxZoom = 4;
CustomMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
var div = ownerDocument.createElement('DIV');
var baseURL = 'C:/Temp';
baseURL += zoom + '_' + coord.x + '_' + coord.y + '.png';
div.style.width = this.tileSize.width + 'px';
div.style.height = this.tileSize.height + 'px';
div.style.backgroundColor = '#1B2D33';
div.style.backgroundImage = 'url(' + baseURL + ')';
return div;
};
CustomMapType.prototype.name = "Custom";
CustomMapType.prototype.alt = "Tile Coordinate Map Type";
var map;
var CustomMapType = new CustomMapType();
function initialize() {
var myLatlng = new google.maps.LatLng(65, -56);
var mapOptions = {
minZoom: 0,
maxZoom: 4,
isPng: true,
mapTypeControl: false,
streetViewControl: false,
center: new google.maps.LatLng(65.07,-56.08),
zoom: 3,
mapTypeControlOptions: {
mapTypeIds: ['custom', google.maps.MapTypeId.ROADMAP],
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World'
});
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
map.mapTypes.set('custom',CustomMapType);
map.setMapTypeId('custom');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="background: #1B2D33;"></div>
</body>
</html>
Your map is not initialized at time when marker is created:
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World'
});
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
So, you have to create map first and then use it:
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World'
});
or call setMap on the marker after initializing the map:
var marker = new google.maps.Marker({
position: myLatlng,
title: 'Hello World'
});
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
marker.setMap(map);

how can prevent div to be visible two times?

I have a google map with some markers. When click on marker get data from a javascript function. The function return a cloudword. The problem is that the results is visible in 2 areas:
1) In infowindow when click on marker
2) At the top of website.
I would like to be visible only at first case.
My code:
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://visapi-gadgets.googlecode.com/svn/trunk/termcloud/tc.css"/>
<script type="text/javascript" src="http://visapi-gadgets.googlecode.com/svn/trunk/termcloud/tc.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Rectangle Overlay</title>
<style type="text/css">
#map {
width:1200px;
height: 700px;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function init() {
var myOptions = {
center: new google.maps.LatLng(38.122404, 23.862591),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'),myOptions);
var locations = [
[document.getElementById('tcdiv'), 38.6391,23.3437],
[document.getElementById('tcdiv2'), 37.893, 23.936999999999998]
];
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.open(map, marker);
infowindow.setContent(locations[i][0]);
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', init);
</script>
<div id="tcdiv"></div>
<script type="text/javascript">
google.load("visualization", "1");
google.setOnLoadCallback(draw);
function draw() {
data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Value');
data.addColumn('string', 'Link');
data.addRows(3);
data.setValue(0, 0, 'First Term');
data.setValue(0, 1, 10);
data.setValue(1, 0, 'Second');
data.setValue(1, 1, 30);
data.setValue(1, 2, 'http://www.google.com');
data.setValue(2, 0, 'Third');
data.setValue(2, 1, 20);
var outputDiv = document.getElementById('tcdiv');
var tc = new TermCloud(outputDiv);
tc.draw(data, null);
}
</script>
<div id="tcdiv2"></div>
<script type="text/javascript">
google.load("visualization", "1");
google.setOnLoadCallback(draw);
function draw() {
data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Value');
data.addColumn('string', 'Link');
data.addRows(3);
data.setValue(0, 0, 'test1');
data.setValue(0, 1, 10);
data.setValue(1, 0, 'test2');
data.setValue(1, 1, 30);
data.setValue(1, 2, 'http://www.google.com');
data.setValue(2, 0, 'test3');
data.setValue(2, 1, 20);
var outputDiv = document.getElementById('tcdiv2');
var tc = new TermCloud(outputDiv);
tc.draw(data, null);
}
</script>
</head>
<body>
<h1>Service</h1>
<h2> Map <h2>
<div id="map"></div>
</script>
</td></tr></table> <div id="chart_div" style="width: 1800px; height: 1100px;"></div> </body>
</html>
You can hide the 2 divs and when you click on the marker, remove the class.
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://visapi-gadgets.googlecode.com/svn/trunk/termcloud/tc.css"/>
<script type="text/javascript" src="http://visapi-gadgets.googlecode.com/svn/trunk/termcloud/tc.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Rectangle Overlay</title>
<style type="text/css">
#map {
width:1200px;
height: 700px;
}
.hideme {
position : absolute;
top: -999px;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function init() {
var myOptions = {
center: new google.maps.LatLng(38.122404, 23.862591),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'),myOptions);
var locations = [
[document.getElementById('tcdiv'), 38.6391,23.3437],
[document.getElementById('tcdiv2'), 37.893, 23.936999999999998]
];
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
locations[i][0].className = "";
infowindow.open(map, marker);
infowindow.setContent(locations[i][0]);
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', init);
</script>
<div id="tcdiv" class="hideme"></div>
<script type="text/javascript">
google.load("visualization", "1");
google.setOnLoadCallback(draw);
function draw() {
data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Value');
data.addColumn('string', 'Link');
data.addRows(3);
data.setValue(0, 0, 'First Term');
data.setValue(0, 1, 10);
data.setValue(1, 0, 'Second');
data.setValue(1, 1, 30);
data.setValue(1, 2, 'http://www.google.com');
data.setValue(2, 0, 'Third');
data.setValue(2, 1, 20);
var outputDiv = document.getElementById('tcdiv');
var tc = new TermCloud(outputDiv);
tc.draw(data, null);
}
</script>
<div id="tcdiv2" class="hideme"></div>
<script type="text/javascript">
google.load("visualization", "1");
google.setOnLoadCallback(draw);
function draw() {
data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Value');
data.addColumn('string', 'Link');
data.addRows(3);
data.setValue(0, 0, 'test1');
data.setValue(0, 1, 10);
data.setValue(1, 0, 'test2');
data.setValue(1, 1, 30);
data.setValue(1, 2, 'http://www.google.com');
data.setValue(2, 0, 'test3');
data.setValue(2, 1, 20);
var outputDiv = document.getElementById('tcdiv2');
var tc = new TermCloud(outputDiv);
tc.draw(data, null);
}
</script>
</head>
<body>
<h1>Service</h1>
<h2> Map <h2>
<div id="map"></div>
</script>
</td></tr></table> <div id="chart_div" style="width: 1800px; height: 1100px;"></div> </body>
</html>

Custom google map embedded picture

I am trying to create a custom google map just like this.
How do I put my own map picture and erase rest of the google map?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100%; z-index: 0;}
#gmnoprint {width: auto;}
</style>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>my custom map</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function CustomMapType() {
}
CustomMapType.prototype.tileSize = new google.maps.Size(256,256);
CustomMapType.prototype.maxZoom = 5;
CustomMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
var div = ownerDocument.createElement('DIV');
var baseURL = 'tiles/';
baseURL +=zoom + '_' + coord.x + '-' + coord.y + '.png';
div.style.width = this.tileSize.width + 'px';
div.style.height = this.tileSize.height + 'px';
div.style.backgroundColor = '#89919E';
div.style.backgroundImage = 'url(' + baseURL + ')';
return div;
};
CustomMapType.prototype.name = "Custom";
CustomMapType.prototype.alt = "Tile Coordinate Map Type";
var map;
var CustomMapType = new CustomMapType();
function initialize() {
var mapOptions = {
minZoom: 2,
maxZoom: 5,
isPng: true,
mapTypeControl: false,
streetViewControl: false,
center: new google.maps.LatLng(65.07,-56.08),
zoom: 3,
mapTypeControlOptions: {
mapTypeIds: ['custom', google.maps.MapTypeId.ROADMAP],
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
map.mapTypes.set('custom',CustomMapType);
map.setMapTypeId('custom');
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="background: #1B2D33;"></div>
</body>
</html>
use that code and put the tiles into the folder output =)

Categories

Resources