0

Initial commit to drop gmaps and to add support for leaflet

Many things do not work at the moment:
* Missing world selector
* Missing overlays (overlay tilesets and markers)
* Missing urlhash code
* Probably other stuff
This commit is contained in:
Andrew Chin
2016-06-28 10:42:29 -04:00
parent b81661dc94
commit e58d23b1a0
8 changed files with 604 additions and 823 deletions

View File

@@ -1,47 +0,0 @@
overviewer.models = {};
/* WorldModel
* Primarily has a collection of TileSets
*/
overviewer.models.WorldModel = Backbone.Model.extend({
initialize: function(attrs) {
attrs.tileSets = new overviewer.models.TileSetCollection();
this.set(attrs);
}
});
/* WorldCollection
* A collection of WorldModels
*/
overviewer.models.WorldCollection = Backbone.Collection.extend({
model: overviewer.models.WorldModel
});
/* TileSetModel
*/
overviewer.models.TileSetModel = Backbone.Model.extend({
defaults: {
markers: []
},
initialize: function(attrs) {
// this implies that the Worlds collection must be
// initialized before any TIleSetModels are created
attrs.world = overviewer.collections.worlds.get(attrs.world);
this.set(attrs);
}
});
overviewer.models.TileSetCollection = Backbone.Collection.extend({
model: overviewer.models.TileSetModel
});
overviewer.models.GoogleMapModel = Backbone.Model.extend({
initialize: function(attrs) {
attrs.currentWorldView = overviewer.collections.worldViews[0];
this.set(attrs);
}
});

View File

@@ -85,18 +85,19 @@ overviewer.gmap = {
* @param string pathExt
*/
'getTileUrlGenerator': function(path, pathBase, pathExt) {
return function(tile, zoom) {
return function(o) {
var url = path;
var zoom = o.z;
var urlBase = ( pathBase ? pathBase : '' );
if(tile.x < 0 || tile.x >= Math.pow(2, zoom) ||
tile.y < 0 || tile.y >= Math.pow(2, zoom)) {
if(o.x < 0 || o.x >= Math.pow(2, zoom) ||
o.y < 0 || o.y >= Math.pow(2, zoom)) {
url += '/blank';
} else if(zoom === 0) {
url += '/base';
} else {
for(var z = zoom - 1; z >= 0; --z) {
var x = Math.floor(tile.x / Math.pow(2, z)) % 2;
var y = Math.floor(tile.y / Math.pow(2, z)) % 2;
var x = Math.floor(o.x / Math.pow(2, z)) % 2;
var y = Math.floor(o.y / Math.pow(2, z)) % 2;
url += '/' + (x + 2 * y);
}
}

View File

@@ -32,145 +32,59 @@ overviewer.util = {
* feature gets added.
*/
'initialize': function() {
overviewer.util.initializeClassPrototypes();
//overviewer.util.initializeClassPrototypes();
document.getElementById('NoJSWarning').remove();
overviewer.collections.worlds = new overviewer.models.WorldCollection();
$.each(overviewerConfig.worlds, function(index, el) {
var n = new overviewer.models.WorldModel({name: el, id:el});
overviewer.collections.worlds.add(n);
});
overviewer.control = L.Control.extend({
onAdd: function() {
console.log("onAdd mycontrol");
var container = L.DomUtil.create('div', 'my-custom-control');
container.innerHTML = "hi";
$.each(overviewerConfig.tilesets, function(index, el) {
var newTset = new overviewer.models.TileSetModel(el);
overviewer.collections.worlds.get(el.world).get("tileSets").add(newTset);
});
overviewer.collections.worlds.each(function(world, index, list) {
var nv = new overviewer.views.WorldView({model: world});
overviewer.collections.worldViews.push(nv);
});
overviewer.mapModel = new overviewer.models.GoogleMapModel({});
overviewer.mapView = new overviewer.views.GoogleMapView({el: document.getElementById(overviewerConfig.CONST.mapDivId), model:overviewer.mapModel});
// any controls must be created after the GoogleMapView is created
// controls should be added in the order they should appear on screen,
// with controls on the outside of the page being added first
var compass = new overviewer.views.CompassView({tagName: 'DIV', model:overviewer.mapModel});
// no need to render the compass now. it's render event will get fired by
// the maptypeid_chagned event
var coordsdiv = new overviewer.views.CoordboxView({tagName: 'DIV'});
coordsdiv.render();
var progressdiv = new overviewer.views.ProgressView({tagName: 'DIV'});
progressdiv.render();
progressdiv.updateProgress();
if (overviewer.collections.haveSigns) {
var signs = new overviewer.views.SignControlView();
signs.registerEvents(signs);
}
var overlayControl = new overviewer.views.OverlayControlView();
var spawnmarker = new overviewer.views.SpawnIconView();
// Update coords on mousemove
google.maps.event.addListener(overviewer.map, 'mousemove', function (event) {
coordsdiv.updateCoords(event.latLng);
});
google.maps.event.addListener(overviewer.map, 'idle', function (event) {
overviewer.util.updateHash();
});
google.maps.event.addListener(overviewer.map, 'maptypeid_changed', function(event) {
// it's handy to keep track of the currently visible tileset. we let
// the GoogleMapView manage this
overviewer.mapView.updateCurrentTileset();
compass.render();
spawnmarker.render();
if (overviewer.collections.locationMarker) {
overviewer.collections.locationMarker.setMap(null);
overviewer.collections.locationMarker = null;
return container
}
// update list of spawn overlays
overlayControl.render();
// re-center on the last viewport
var currentWorldView = overviewer.mapModel.get("currentWorldView");
if (currentWorldView.options.lastViewport) {
var x = currentWorldView.options.lastViewport[0];
var y = currentWorldView.options.lastViewport[1];
var z = currentWorldView.options.lastViewport[2];
var zoom = currentWorldView.options.lastViewport[3];
var latlngcoords = overviewer.util.fromWorldToLatLng(x, y, z,
overviewer.mapView.options.currentTileSet);
overviewer.map.setCenter(latlngcoords);
if (zoom == 'max') {
zoom = overviewer.mapView.options.currentTileSet.get('maxZoom');
} else if (zoom == 'min') {
zoom = overviewer.mapView.options.currentTileSet.get('minZoom');
} else {
zoom = parseInt(zoom);
if (zoom < 0) {
// if zoom is negative, treat it as a "zoom out from max"
zoom += overviewer.mapView.options.currentTileSet.get('maxZoom');
} else {
// fall back to default zoom
zoom = overviewer.mapView.options.currentTileSet.get('defaultZoom');
}
}
// clip zoom
if (zoom > overviewer.mapView.options.currentTileSet.get('maxZoom'))
zoom = overviewer.mapView.options.currentTileSet.get('maxZoom');
if (zoom < overviewer.mapView.options.currentTileSet.get('minZoom'))
zoom = overviewer.mapView.options.currentTileSet.get('minZoom');
overviewer.map.setZoom(zoom);
}
});
// hook up some events
overviewer.mapModel.bind("change:currentWorldView", overviewer.mapView.render, overviewer.mapView);
overviewer.mapView.render();
// Jump to the hash if given (and do so for any further hash changes)
overviewer.util.initHash();
$(window).on('hashchange', function() { overviewer.util.initHash(); });
// create this control after initHash so it can correctly select the current world
var worldSelector = new overviewer.views.WorldSelectorView({tagName:'DIV'});
overviewer.collections.worlds.bind("add", worldSelector.render, worldSelector);
overviewer.util.initializeMarkers();
overviewer.map = L.map('mcmap', {
crs: L.CRS.Simple,
minZoom: 0});
var tset = overviewerConfig.tilesets[0];
/*
overviewer.util.initializeMapTypes();
overviewer.util.initializeMap();
overviewer.util.initializeRegions();
overviewer.util.createMapControls();
*/
// run ready callbacks now
google.maps.event.addListenerOnce(overviewer.map, 'idle', function(){
// ok now..
overviewer.util.runReadyQueue();
overviewer.util.isReady = true;
overviewer.map.on("click", function(e) {
console.log(e.latlng);
var point = overviewer.util.fromLatLngToWorld(e.latlng.lat, e.latlng.lng, tset);
console.log(point);
});
var tilesetLayers = {}
$.each(overviewerConfig.worlds, function(idx, world_name) {
overviewer.collections.mapTypes[world_name] = {}
});
$.each(overviewerConfig.tilesets, function(idx, obj) {
var myLayer = new L.tileLayer('', {
tileSize: overviewerConfig.CONST.tileSize,
noWrap: true,
maxZoom: obj.maxZoom,
minZoom: obj.minZoom,
});
myLayer.getTileUrl = overviewer.gmap.getTileUrlGenerator(obj.path, obj.base, obj.imgextension);
overviewer.collections.mapTypes[obj.world][obj.name] = myLayer;
});
L.control.layers(overviewer.collections.mapTypes[overviewerConfig.worlds[0]], {}, {collapsed: false}).addTo(overviewer.map);
//myLayer.addTo(overviewer.map);
overviewer.map.setView(overviewer.util.fromWorldToLatLng(tset.spawn[0], tset.spawn[1], tset.spawn[2], tset), 1);
},
'injectMarkerScript': function(url) {
@@ -262,15 +176,6 @@ overviewer.util = {
"pregQuote": function(str) {
return (str+'').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, "\\$1");
},
/**
* Change the map's div's background color according to the mapType's bg_color setting
*
* @param string mapTypeId
* @return string
*/
'getMapTypeBackgroundColor': function(id) {
return overviewerConfig.tilesets[id].bgcolor;
},
/**
* Gee, I wonder what this does.
*
@@ -316,10 +221,10 @@ overviewer.util = {
*
* @return google.maps.LatLng
*/
'fromWorldToLatLng': function(x, y, z, model) {
'fromWorldToLatLng': function(x, y, z, tset) {
var zoomLevels = model.get("zoomLevels");
var north_direction = model.get('north_direction');
var zoomLevels = tset.zoomLevels;
var north_direction = tset.north_direction;
// the width and height of all the highest-zoom tiles combined,
// inverted
@@ -367,7 +272,7 @@ overviewer.util = {
// add on 12 px to the X coordinate to center our point
lng += 12 * perPixel;
return new google.maps.LatLng(lat, lng);
return [-lat*overviewerConfig.CONST.tileSize, lng*overviewerConfig.CONST.tileSize]
},
/**
* The opposite of fromWorldToLatLng
@@ -379,9 +284,15 @@ overviewer.util = {
*
* @return Array
*/
'fromLatLngToWorld': function(lat, lng, model) {
var zoomLevels = model.get("zoomLevels");
var north_direction = model.get("north_direction");
'fromLatLngToWorld': function(lat, lng, tset) {
var zoomLevels = tset.zoomLevels;
var north_direction = tset.north_direction;
lat = -lat/overviewerConfig.CONST.tileSize;
lng = lng/overviewerConfig.CONST.tileSize;
// lat lng will always be between (0,0) -- top left corner
// (-384, 384) -- bottom right corner
// Initialize world x/y/z object to be returned
var point = Array();

View File

@@ -1,621 +0,0 @@
overviewer.views= {}
overviewer.views.WorldView = Backbone.View.extend({
initialize: function(opts) {
this.options.mapTypes = [];
this.options.overlayMapTypes = [];
this.options.mapTypeIds = [];
this.options.overlayMapTypeIds = [];
var curTileSet = this.model.get("tileSets").at(0);
var spawn = curTileSet.get("spawn");
if (spawn == "false") {
var spawn = [0,64,0];
}
this.options.lastViewport = [spawn[0],spawn[1],spawn[2],curTileSet.get("defaultZoom")];
this.model.get("tileSets").each(function(tset, index, list) {
// ignore overlays:
var ops = {
getTileUrl: overviewer.gmap.getTileUrlGenerator(tset.get("path"), tset.get("base"), tset.get("imgextension")),
'tileSize': new google.maps.Size(
overviewerConfig.CONST.tileSize,
overviewerConfig.CONST.tileSize),
'maxZoom': tset.get("maxZoom"),
'minZoom': tset.get("minZoom"),
'isPng': (tset.get("imgextension")=="png")
};
var newMapType = new google.maps.ImageMapType(ops);
newMapType.name = tset.get("name");
newMapType.shortname = tset.get("name");
newMapType.alt = "Minecraft " + tset.get("name") + " Map";
newMapType.projection = new overviewer.classes.MapProjection();
newMapType._ov_tileSet = tset;
if (tset.get("isOverlay")) {
newMapType.tiles = tset.get("tilesets");
this.options.overlayMapTypes.push(newMapType);
this.options.overlayMapTypeIds.push(overviewerConfig.CONST.mapDivId + this.model.get("name") + tset.get("name"));
} else {
this.options.mapTypes.push(newMapType);
this.options.mapTypeIds.push(overviewerConfig.CONST.mapDivId + this.model.get("name") + tset.get("name"));
}
}, this);
this.model.get("tileSets").each(function(tset, index, list) {
// ignore non-overlays:
if (!tset.get("isOverlay")) { return; };
});
}
});
overviewer.views.WorldSelectorView = Backbone.View.extend({
initialize: function() {
if(overviewer.collections.worldViews.length > 1) {
$(this.el).addClass("customControl");
// a div will have already been created for us, we just
// need to register it with the google maps control
var selectBox = document.createElement('select');
$.each(overviewer.collections.worldViews, function(index, elem) {
var o = document.createElement("option");
o.value = elem.model.get("name");
o.innerHTML = elem.model.get("name");
if (elem.model == overviewer.mapModel.get("currentWorldView").model) {
o.selected=true;
}
$(o).data("viewObj", elem);
selectBox.appendChild(o);
});
this.el.appendChild(selectBox);
overviewer.map.controls[google.maps.ControlPosition.TOP_LEFT].push(this.el);
}
},
events: {
"change select": "changeWorld"
},
changeWorld: function() {
var selectObj = this.$("select")[0];
var selectedOption = selectObj.options[selectObj.selectedIndex];
overviewer.mapModel.set({currentWorldView: $(selectedOption).data("viewObj")});
//
},
render: function(t) {
//console.log("WorldSelectorView::render() TODO implement this (low priority)");
}
});
overviewer.views.CompassView = Backbone.View.extend({
initialize: function() {
this.el.index=0;
var compassImg = document.createElement('IMG');
compassImg.src = ''; // this will be set properly in the render function (below)
this.el.appendChild(compassImg);
overviewer.map.controls[google.maps.ControlPosition.TOP_RIGHT].push(this.el);
},
/**
* CompassView::render
*/
render: function() {
var tsetModel = overviewer.mapView.options.currentTileSet;
var northdir = tsetModel.get("north_direction");
if (northdir == overviewerConfig.CONST.UPPERLEFT)
this.$("IMG").attr("src","compass_upper-left.png");
if (northdir == overviewerConfig.CONST.UPPERRIGHT)
this.$("IMG").attr("src", "compass_upper-right.png");
if (northdir == overviewerConfig.CONST.LOWERLEFT)
this.$("IMG").attr("src", "compass_lower-left.png");
if (northdir == overviewerConfig.CONST.LOWERRIGHT)
this.$("IMG").attr("src", "compass_lower-right.png");
}
});
overviewer.views.CoordboxView = Backbone.View.extend({
initialize: function() {
// Coords box
this.el.id = 'coordsDiv';
this.el.innerHTML = 'coords here';
overviewer.map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(this.el);
},
updateCoords: function(latLng) {
var worldcoords = overviewer.util.fromLatLngToWorld(latLng.lat(),
latLng.lng(),
overviewer.mapView.options.currentTileSet);
var regionfileX = Math.floor(Math.floor(worldcoords.x / 16.0) / 32.0);
var regionfileZ = Math.floor(Math.floor(worldcoords.z / 16.0) / 32.0);
var regionfilename = "r." + regionfileX + "." + regionfileZ + ".mca";
this.el.innerHTML = "<strong>X</strong> " + Math.round(worldcoords.x) +
" <strong>Z</strong> " + Math.round(worldcoords.z) +
" (" + regionfilename + ")";
}
});
overviewer.views.ProgressView = Backbone.View.extend({
initialize: function() {
this.el.id = 'progressDiv';
this.el.innerHTML = 'Current Render Progress';
overviewer.map.controls[google.maps.ControlPosition.BOTTOM_RIGHT].push(this.el);
$(this.el).hide();
$.ajaxSetup({cache: false});
},
updateProgress: function() {
e = this;
$.getJSON('progress.json', null, function(d){
if (!(d == null||d=='')) {
$(e.el).show();
e.el.innerHTML = d['message'];
if (d.update > 0) {
setTimeout("e.updateProgress()", d.update);
} else {
setTimeout("e.updateProgress()", 60000);
e.el.innerHTML="Hidden - d.update < 0";
$(e.el).hide();
}
} else {
e.el.innerHTML="Hidden - !!d==false";
$(e.el).hide();
}
});
}
});
/* GoogleMapView is responsible for dealing with the GoogleMaps API to create the
*/
overviewer.views.GoogleMapView = Backbone.View.extend({
initialize: function(opts) {
this.options.map = null;
var curWorld = this.model.get("currentWorldView").model;
var curTset = curWorld.get("tileSets").at(0);
var spawn = curTset.get("spawn");
if (spawn == "false") {
var spawn = [0,64,0];
}
var mapcenter = overviewer.util.fromWorldToLatLng(
spawn[0],
spawn[1],
spawn[2],
curTset);
this.options.mapTypes=[];
this.options.mapTypeIds=[];
var opts = this.options;
var mapOptions = {};
//
// init the map with some default options. use the first tileset in the first world
this.options.mapOptions = {
zoom: curTset.get("defaultZoom"),
center: mapcenter,
panControl: true,
scaleControl: false,
mapTypeControl: true,
//mapTypeControlOptions: {
//mapTypeIds: this.options.mapTypeIds
//},
mapTypeId: '',
streetViewControl: false,
overviewMapControl: true,
zoomControl: true,
backgroundColor: curTset.get("bgcolor")
};
overviewer.map = new google.maps.Map(this.el, this.options.mapOptions);
// register every ImageMapType with the map
$.each(overviewer.collections.worldViews, function( index, worldView) {
$.each(worldView.options.mapTypes, function(i_index, maptype) {
overviewer.map.mapTypes.set(overviewerConfig.CONST.mapDivId +
worldView.model.get("name") + maptype.shortname , maptype);
});
});
},
/* GoogleMapView::render()
* Should be called when the current world has changed in GoogleMapModel
*/
render: function() {
var view = this.model.get("currentWorldView");
this.options.mapOptions.mapTypeControlOptions = {
mapTypeIds: view.options.mapTypeIds};
this.options.mapOptions.mapTypeId = view.options.mapTypeIds[0];
overviewer.map.setOptions(this.options.mapOptions);
return this;
},
/**
* GoogleMapView::updateCurrentTileset()
* Keeps track of the currently visible tileset
*/
updateCurrentTileset: function() {
var currentWorldView = this.model.get("currentWorldView");
var gmapCurrent = overviewer.map.getMapTypeId();
for (id in currentWorldView.options.mapTypeIds) {
if (currentWorldView.options.mapTypeIds[id] == gmapCurrent) {
this.options.currentTileSet = currentWorldView.options.mapTypes[id]._ov_tileSet;
}
}
// for this world, remember our current viewport (as worldcoords, not LatLng)
//
}
});
/**
* OverlayControlView
*/
overviewer.views.OverlayControlView = Backbone.View.extend({
/** OverlayControlVIew::initialize
*/
initialize: function(opts) {
$(this.el).addClass("customControl");
overviewer.map.controls[google.maps.ControlPosition.TOP_RIGHT].push(this.el);
},
registerEvents: function(me) {
overviewer.mapModel.bind("change:currentWorldView", me.render, me);
},
/**
* OverlayControlView::render
*/
render: function() {
this.el.innerHTML="";
// hide all visible overlays:
overviewer.map.overlayMapTypes.clear()
// if this world has no overlays, don't create this control
var mapTypes = overviewer.mapModel.get('currentWorldView').options.overlayMapTypes;
if (mapTypes.length == 0) { return; }
var controlText = document.createElement('DIV');
controlText.innerHTML = "Overlays";
var controlBorder = document.createElement('DIV');
$(controlBorder).addClass('top');
this.el.appendChild(controlBorder);
controlBorder.appendChild(controlText);
var dropdownDiv = document.createElement('DIV');
$(dropdownDiv).addClass('dropDown');
this.el.appendChild(dropdownDiv);
dropdownDiv.innerHTML='';
$(controlText).click(function() {
$(controlBorder).toggleClass('top-active');
$(dropdownDiv).toggle();
});
var currentTileSetPath = overviewer.mapView.options.currentTileSet.get('path');
for (i in mapTypes) {
var mt = mapTypes[i];
// if this overlay specifies a list of valid tilesets, then skip over any invalid tilesets
if ((mt.tiles.length > 0) && (mt.tiles.indexOf(currentTileSetPath) ==-1)) {
continue;
}
this.addItem({label: mt.name,
name: mt.name,
mt: mt,
action: function(this_item, checked) {
if (checked) {
overviewer.map.overlayMapTypes.push(this_item.mt);
} else {
var idx_to_delete = -1;
overviewer.map.overlayMapTypes.forEach(function(e, j) {
if (e == this_item.mt) {
idx_to_delete = j;
}
});
if (idx_to_delete >= 0) {
overviewer.map.overlayMapTypes.removeAt(idx_to_delete);
}
}
}
});
}
},
addItem: function(item) {
var itemDiv = document.createElement('div');
var itemInput = document.createElement('input');
itemInput.type='checkbox';
// if this overlay is already visible, set the checkbox
// to checked
overviewer.map.overlayMapTypes.forEach(function(e, j) {
if (e == item.mt) {
itemInput.checked=true;
}
});
// give it a name
$(itemInput).attr("_mc_overlayname", item.name);
jQuery(itemInput).click((function(local_item) {
return function(e) {
item.action(local_item, e.target.checked);
};
})(item));
this.$(".dropDown")[0].appendChild(itemDiv);
itemDiv.appendChild(itemInput);
var textNode = document.createElement('text');
textNode.innerHTML = item.label + '<br/>';
itemDiv.appendChild(textNode);
}
});
/**
* SignControlView
*/
overviewer.views.SignControlView = Backbone.View.extend({
/** SignControlView::initialize
*/
initialize: function(opts) {
$(this.el).addClass("customControl");
overviewer.map.controls[google.maps.ControlPosition.TOP_RIGHT].push(this.el);
},
registerEvents: function(me) {
google.maps.event.addListener(overviewer.map, 'maptypeid_changed', function(event) {
overviewer.mapView.updateCurrentTileset();
// workaround IE issue. bah!
if (typeof markers=="undefined") { return; }
me.render();
// hide markers that are part of other tilesets than this
// for each markerSet, check:
// if the markerSet isnot part of this tileset, hide all of the markers
var curMarkerSet = overviewer.mapView.options.currentTileSet.get("path");
var dataRoot = markers[curMarkerSet];
jQuery.each(markers, function(key, markerSet) {
if (key != curMarkerSet) {
jQuery.each(markerSet, function(i, markerGroup) {
if (typeof markerGroup.markerObjs != "undefined") {
jQuery.each(markerGroup.markerObjs, function(j, markerObj) {
markerObj.setVisible(false);
});
}
});
}
});
return;
});
},
/**
* SignControlView::render
*/
render: function() {
var curMarkerSet = overviewer.mapView.options.currentTileSet.get("path");
//var dataRoot = overviewer.collections.markerInfo[curMarkerSet];
var dataRoot = markers[curMarkerSet];
this.el.innerHTML="";
// if we have no markerSets for this tileset, do nothing:
if (!dataRoot) { return; }
var controlText = document.createElement('DIV');
controlText.innerHTML = overviewer.mapView.options.currentTileSet.get("poititle");
var controlBorder = document.createElement('DIV');
$(controlBorder).addClass('top');
this.el.appendChild(controlBorder);
controlBorder.appendChild(controlText);
var dropdownDiv = document.createElement('DIV');
$(dropdownDiv).addClass('dropDown');
this.el.appendChild(dropdownDiv);
dropdownDiv.innerHTML='';
// add the functionality to toggle visibility of the items
$(controlText).click(function() {
$(controlBorder).toggleClass('top-active');
$(dropdownDiv).toggle();
});
//dataRoot['markers'] = [];
//
for (i in dataRoot) {
var groupName = dataRoot[i].groupName;
if (!dataRoot[i].created) {
dataRoot[i].markerObjs = [];
for (j in markersDB[groupName].raw) {
var entity = markersDB[groupName].raw[j];
if (entity['icon']) {
iconURL = entity['icon'];
} else {
iconURL = dataRoot[i].icon;
}
var marker = new google.maps.Marker({
'position': overviewer.util.fromWorldToLatLng(entity.x,
entity.y, entity.z, overviewer.mapView.options.currentTileSet),
'map': overviewer.map,
'title': jQuery.trim(entity.hovertext),
'content': jQuery.trim(entity.text),
'icon': iconURL,
'visible': false
});
if(entity['createInfoWindow'] == true) {
overviewer.util.createMarkerInfoWindow(marker);
} else {
if(dataRoot[i].createInfoWindow == true) {
overviewer.util.createMarkerInfoWindow(marker);
}
}
dataRoot[i].markerObjs.push(marker);
// Polyline stuff added by FreakusGeekus. Probably needs work.
if (typeof entity['polyline'] != 'undefined') {
var polypath = new Array();
for (point in entity.polyline) {
polypath.push(overviewer.util.fromWorldToLatLng(entity.polyline[point].x, entity.polyline[point].y, entity.polyline[point].z, overviewer.mapView.options.currentTileSet));
}
var polyline = new google.maps.Polyline({
'path': polypath,
'clickable': false,
'map': overviewer.map,
'visible': false,
'strokeColor': entity['strokeColor']
});
dataRoot[i].markerObjs.push(polyline);
}
// Polygons
if (typeof entity['polygon'] != 'undefined') {
var polypath = new Array();
for (point in entity.polygon) {
polypath.push(overviewer.util.fromWorldToLatLng(entity.polygon[point].x, entity.polygon[point].y, entity.polygon[point].z, overviewer.mapView.options.currentTileSet));
}
var polygon = new google.maps.Polygon({
'clickable': false,
'fillColor': entity['fillColor'],
'fillOpacity': entity['fillOpacity'],
'map': overviewer.map,
'path': polypath,
'strokeColor': entity['strokeColor'],
'strokeOpacity': entity['strokeOpacity'],
'visible': false
});
dataRoot[i].markerObjs.push(polygon);
}
}
dataRoot[i].created = true;
}
}
// add some menus
for (i in dataRoot) {
var group = dataRoot[i];
this.addItem({group: group, action:function(this_item, checked) {
this_item.group.checked = checked;
jQuery.each(this_item.group.markerObjs, function(i, markerObj) {
markerObj.setVisible(checked);
});
}});
if (group.checked) {
jQuery.each(group.markerObjs, function(i, markerObj) {
markerObj.setVisible(true);
});
}
}
},
addItem: function(item) {
var itemDiv = document.createElement('div');
var itemInput = document.createElement('input');
itemInput.type='checkbox';
if (item.group.checked) {
itemInput.checked="true";
}
// give it a name
$(itemInput).data('label',item.group.displayName);
$(itemInput).attr("_mc_groupname", item.group.gropuName);
jQuery(itemInput).click((function(local_item) {
return function(e) {
item.action(local_item, e.target.checked);
};
})(item));
this.$(".dropDown")[0].appendChild(itemDiv);
itemDiv.appendChild(itemInput);
var textNode = document.createElement('text');
if(item.icon) {
textNode.innerHTML = '<img width="15" height="15" src="' +
item.icon + '">' + item.group.displayName + '&nbsp;<br/>';
} else {
textNode.innerHTML = item.group.displayName + '&nbsp;<br/>';
}
itemDiv.appendChild(textNode);
itemDiv.style.whiteSpace = "nowrap";
}
});
/**
* SpawnIconView
*/
overviewer.views.SpawnIconView = Backbone.View.extend({
render: function() {
//
var curTileSet = overviewer.mapView.options.currentTileSet;
if (overviewer.collections.spawnMarker) {
overviewer.collections.spawnMarker.setMap(null);
overviewer.collections.spawnMarker = null;
}
var spawn = curTileSet.get("spawn");
if (spawn) {
overviewer.collections.spawnMarker = new google.maps.Marker({
'position': overviewer.util.fromWorldToLatLng(spawn[0],
spawn[1], spawn[2], overviewer.mapView.options.currentTileSet),
'map': overviewer.map,
'title': 'spawn',
'icon': overviewerConfig.CONST.image.spawnMarker,
'visible': false
});
overviewer.collections.spawnMarker.setVisible(true);
}
}
});
overviewer.views.LocationIconView = Backbone.View.extend({
render: function() {
//
if (overviewer.collections.locationMarker) {
overviewer.collections.locationMarker.setMap(null);
overviewer.collections.locationMarker = null;
}
overviewer.collections.locationMarker = new google.maps.Marker({
'position': overviewer.map.getCenter(),
'map': overviewer.map,
'title': 'location',
'icon': overviewerConfig.CONST.image.queryMarker,
'visible': false
});
overviewer.collections.locationMarker.setVisible(overviewer.mapView.options.currentTileSet.get("showlocationmarker"));
}
});

View File

@@ -10,14 +10,13 @@
<link rel="stylesheet" href="overviewer.css" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="underscore.js"></script>
<script type="text/javascript" src="backbone.js"></script>
<script type="text/javascript" src="overviewerConfig.js"></script>
<script type="text/javascript" src="overviewer.js"></script>
<script type="text/javascript" src="baseMarkers.js"></script>
<link rel="stylesheet" href="leaflet.css" />
<script src="leaflet.js"></script>
</head>

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,523 @@
/* required styles */
.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-map-pane svg,
.leaflet-map-pane canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
position: absolute;
left: 0;
top: 0;
}
.leaflet-container {
overflow: hidden;
-ms-touch-action: none;
touch-action: none;
}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-user-drag: none;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
image-rendering: -webkit-optimize-contrast;
}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
width: 1600px;
height: 1600px;
-webkit-transform-origin: 0 0;
}
.leaflet-marker-icon,
.leaflet-marker-shadow {
display: block;
}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg,
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer {
max-width: none !important;
}
.leaflet-tile {
filter: inherit;
visibility: hidden;
}
.leaflet-tile-loaded {
visibility: inherit;
}
.leaflet-zoom-box {
width: 0;
height: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 800;
}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
-moz-user-select: none;
}
.leaflet-pane { z-index: 400; }
.leaflet-tile-pane { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane { z-index: 500; }
.leaflet-marker-pane { z-index: 600; }
.leaflet-popup-pane { z-index: 700; }
.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg { z-index: 200; }
.leaflet-vml-shape {
width: 1px;
height: 1px;
}
.lvml {
behavior: url(#default#VML);
display: inline-block;
position: absolute;
}
/* control positioning */
.leaflet-control {
position: relative;
z-index: 800;
pointer-events: auto;
}
.leaflet-top,
.leaflet-bottom {
position: absolute;
z-index: 1000;
pointer-events: none;
}
.leaflet-top {
top: 0;
}
.leaflet-right {
right: 0;
}
.leaflet-bottom {
bottom: 0;
}
.leaflet-left {
left: 0;
}
.leaflet-control {
float: left;
clear: both;
}
.leaflet-right .leaflet-control {
float: right;
}
.leaflet-top .leaflet-control {
margin-top: 10px;
}
.leaflet-bottom .leaflet-control {
margin-bottom: 10px;
}
.leaflet-left .leaflet-control {
margin-left: 10px;
}
.leaflet-right .leaflet-control {
margin-right: 10px;
}
/* zoom and fade animations */
.leaflet-fade-anim .leaflet-tile {
will-change: opacity;
}
.leaflet-fade-anim .leaflet-popup {
opacity: 0;
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
opacity: 1;
}
.leaflet-zoom-animated {
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
.leaflet-zoom-anim .leaflet-zoom-animated {
will-change: transform;
}
.leaflet-zoom-anim .leaflet-zoom-animated {
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
-moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
-o-transition: -o-transform 0.25s cubic-bezier(0,0,0.25,1);
transition: transform 0.25s cubic-bezier(0,0,0.25,1);
}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
}
.leaflet-zoom-anim .leaflet-zoom-hide {
visibility: hidden;
}
/* cursors */
.leaflet-interactive {
cursor: pointer;
}
.leaflet-grab {
cursor: -webkit-grab;
cursor: -moz-grab;
}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
cursor: crosshair;
}
.leaflet-popup-pane,
.leaflet-control {
cursor: auto;
}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
cursor: move;
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
}
/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
pointer-events: none;
}
.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive {
pointer-events: auto;
}
/* visual tweaks */
.leaflet-container {
background: #ddd;
outline: 0;
}
.leaflet-container a {
color: #0078A8;
}
.leaflet-container a.leaflet-active {
outline: 2px solid orange;
}
.leaflet-zoom-box {
border: 2px dotted #38f;
background: rgba(255,255,255,0.5);
}
/* general typography */
.leaflet-container {
font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
}
/* general toolbar styles */
.leaflet-bar {
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
border-radius: 4px;
}
.leaflet-bar a,
.leaflet-bar a:hover {
background-color: #fff;
border-bottom: 1px solid #ccc;
width: 26px;
height: 26px;
line-height: 26px;
display: block;
text-align: center;
text-decoration: none;
color: black;
}
.leaflet-bar a,
.leaflet-control-layers-toggle {
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
}
.leaflet-bar a:hover {
background-color: #f4f4f4;
}
.leaflet-bar a:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.leaflet-bar a:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom: none;
}
.leaflet-bar a.leaflet-disabled {
cursor: default;
background-color: #f4f4f4;
color: #bbb;
}
.leaflet-touch .leaflet-bar a {
width: 30px;
height: 30px;
line-height: 30px;
}
/* zoom control */
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
font: bold 18px 'Lucida Console', Monaco, monospace;
text-indent: 1px;
}
.leaflet-control-zoom-out {
font-size: 20px;
}
.leaflet-touch .leaflet-control-zoom-in {
font-size: 22px;
}
.leaflet-touch .leaflet-control-zoom-out {
font-size: 24px;
}
/* layers control */
.leaflet-control-layers {
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
background: #fff;
border-radius: 5px;
}
.leaflet-control-layers-toggle {
background-image: url(images/layers.png);
width: 36px;
height: 36px;
}
.leaflet-retina .leaflet-control-layers-toggle {
background-image: url(images/layers-2x.png);
background-size: 26px 26px;
}
.leaflet-touch .leaflet-control-layers-toggle {
width: 44px;
height: 44px;
}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
display: none;
}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
display: block;
position: relative;
}
.leaflet-control-layers-expanded {
padding: 6px 10px 6px 6px;
color: #333;
background: #fff;
}
.leaflet-control-layers-scrollbar {
overflow-y: scroll;
padding-right: 5px;
}
.leaflet-control-layers-selector {
margin-top: 2px;
position: relative;
top: 1px;
}
.leaflet-control-layers label {
display: block;
}
.leaflet-control-layers-separator {
height: 0;
border-top: 1px solid #ddd;
margin: 5px -10px 5px -6px;
}
/* attribution and scale controls */
.leaflet-container .leaflet-control-attribution {
background: #fff;
background: rgba(255, 255, 255, 0.7);
margin: 0;
}
.leaflet-control-attribution,
.leaflet-control-scale-line {
padding: 0 5px;
color: #333;
}
.leaflet-control-attribution a {
text-decoration: none;
}
.leaflet-control-attribution a:hover {
text-decoration: underline;
}
.leaflet-container .leaflet-control-attribution,
.leaflet-container .leaflet-control-scale {
font-size: 11px;
}
.leaflet-left .leaflet-control-scale {
margin-left: 5px;
}
.leaflet-bottom .leaflet-control-scale {
margin-bottom: 5px;
}
.leaflet-control-scale-line {
border: 2px solid #777;
border-top: none;
line-height: 1.1;
padding: 2px 5px 1px;
font-size: 11px;
white-space: nowrap;
overflow: hidden;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #fff;
background: rgba(255, 255, 255, 0.5);
}
.leaflet-control-scale-line:not(:first-child) {
border-top: 2px solid #777;
border-bottom: none;
margin-top: -2px;
}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
border-bottom: 2px solid #777;
}
.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
box-shadow: none;
}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
border: 2px solid rgba(0,0,0,0.2);
background-clip: padding-box;
}
/* popup */
.leaflet-popup {
position: absolute;
text-align: center;
}
.leaflet-popup-content-wrapper {
padding: 1px;
text-align: left;
border-radius: 12px;
}
.leaflet-popup-content {
margin: 13px 19px;
line-height: 1.4;
}
.leaflet-popup-content p {
margin: 18px 0;
}
.leaflet-popup-tip-container {
margin: 0 auto;
width: 40px;
height: 20px;
position: relative;
overflow: hidden;
}
.leaflet-popup-tip {
width: 17px;
height: 17px;
padding: 1px;
margin: -10px auto 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
background: white;
color: #333;
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
}
.leaflet-container a.leaflet-popup-close-button {
position: absolute;
top: 0;
right: 0;
padding: 4px 4px 0 0;
border: none;
text-align: center;
width: 18px;
height: 14px;
font: 16px/14px Tahoma, Verdana, sans-serif;
color: #c3c3c3;
text-decoration: none;
font-weight: bold;
background: transparent;
}
.leaflet-container a.leaflet-popup-close-button:hover {
color: #999;
}
.leaflet-popup-scrolled {
overflow: auto;
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
}
.leaflet-oldie .leaflet-popup-content-wrapper {
zoom: 1;
}
.leaflet-oldie .leaflet-popup-tip {
width: 24px;
margin: 0 auto;
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
}
.leaflet-oldie .leaflet-popup-tip-container {
margin-top: -1px;
}
.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
border: 1px solid #999;
}
/* div icon */
.leaflet-div-icon {
background: #fff;
border: 1px solid #666;
}

File diff suppressed because one or more lines are too long