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:
@@ -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);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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 + ' <br/>';
|
||||
} else {
|
||||
textNode.innerHTML = item.group.displayName + ' <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"));
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
6
overviewer_core/data/web_assets/jquery.min.js
vendored
Normal file
6
overviewer_core/data/web_assets/jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
523
overviewer_core/data/web_assets/leaflet.css
Normal file
523
overviewer_core/data/web_assets/leaflet.css
Normal 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;
|
||||
}
|
||||
9
overviewer_core/data/web_assets/leaflet.js
Normal file
9
overviewer_core/data/web_assets/leaflet.js
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user