Commit 413a7443 authored by Adrien Pavie's avatar Adrien Pavie
Browse files

Using mapcss in main view, merging some config files

parent 44d9d2d2
......@@ -12,6 +12,9 @@ OpenLevelUp also uses the same stylesheets.
Here is a list of MapCSS 0.2 properties that are supported by OpenLevelUp. See
[MapCSS definition](http://wiki.openstreetmap.org/wiki/MapCSS/0.2) for details.
### Meta
Meta properties (describing the stylesheets) are supported. However, only `title` is read by OpenLevelUp.
### Canvas
Canvas properties aren't supported. For background customization you should use configuration files.
......
......@@ -94,6 +94,65 @@
}
],
"feature": {
"details": {
"major": {
"opening_hours": {
"type": "hours",
"img": "clock",
"name": "Opening hours"
},
"contact:website": {
"type": "link",
"img": "web",
"name": "Website"
},
"website": {
"type": "link",
"img": "web",
"name": "Website"
},
"contact:email": {
"type": "email",
"img": "email",
"name": "E-mail"
},
"email": {
"type": "email",
"img": "email",
"name": "E-mail"
},
"contact:phone": {
"type": "text",
"img": "phone",
"name": "Phone"
},
"phone": {
"type": "text",
"img": "phone",
"name": "Phone"
},
"wheelchair": {
"type": "text_bind",
"img": "wheelchair",
"text_bind": { "yes": "Fully accessible", "limited": "Limited access", "no": "Not accessible" }
}
},
"minor": {
"cuisine": {
"type": "text",
"img": "cuisine",
"name": "Cuisine"
},
"description": {
"type": "text",
"img": "info",
"name": "More details"
}
}
}
},
"routing": {
"foot": {
"name": "By foot",
......@@ -115,5 +174,109 @@
"edit": {
"id_url": "http://projets.pavie.info/id-indoor/"
},
"polygonFeatures": {
"building": true,
"highway": {
"included_values": {
"services": true,
"rest_area": true,
"escape": true,
"elevator": true
}
},
"natural": {
"excluded_values": {
"coastline": true,
"cliff": true,
"ridge": true,
"arete": true,
"tree_row": true
}
},
"landuse": true,
"waterway": {
"included_values": {
"riverbank": true,
"dock": true,
"boatyard": true,
"dam": true
}
},
"amenity": true,
"leisure": true,
"barrier": {
"included_values": {
"city_wall": true,
"ditch": true,
"retaining_wall": true,
"spikes": true,
"self_checkout": true,
"checkout": true,
"shelf": true
}
},
"railway": {
"included_values": {
"station": true,
"turntable": true,
"roundhouse": true,
"platform": true
}
},
"area": true,
"boundary": true,
"man_made": {
"excluded_values": {
"cutline": true,
"embankment": true,
"pipeline": true
}
},
"power": {
"included_values": {
"plant": true,
"substation": true,
"generator": true,
"transformer": true
}
},
"place": true,
"shop": true,
"aeroway": {
"excluded_values": {
"taxiway": true
}
},
"tourism": true,
"historic": true,
"public_transport": true,
"office": true,
"building:part": true,
"military": true,
"ruins": true,
"area:highway": true,
"craft": true,
"golf": true,
"indoor": {
"excluded_values": {
"yes": true,
"wall": true
}
},
"buildingpart": {
"excluded_values": {
"yes": true,
"wall": true
}
},
"room": true,
"department": true
},
"mapcss": {
"folder": "styles",
"default": "default.mapcss"
}
}
{
"building": true,
"highway": {
"included_values": {
"services": true,
"rest_area": true,
"escape": true,
"elevator": true
}
},
"natural": {
"excluded_values": {
"coastline": true,
"cliff": true,
"ridge": true,
"arete": true,
"tree_row": true
}
},
"landuse": true,
"waterway": {
"included_values": {
"riverbank": true,
"dock": true,
"boatyard": true,
"dam": true
}
},
"amenity": true,
"leisure": true,
"barrier": {
"included_values": {
"city_wall": true,
"ditch": true,
"retaining_wall": true,
"spikes": true,
"self_checkout": true,
"checkout": true,
"shelf": true
}
},
"railway": {
"included_values": {
"station": true,
"turntable": true,
"roundhouse": true,
"platform": true
}
},
"area": true,
"boundary": true,
"man_made": {
"excluded_values": {
"cutline": true,
"embankment": true,
"pipeline": true
}
},
"power": {
"included_values": {
"plant": true,
"substation": true,
"generator": true,
"transformer": true
}
},
"place": true,
"shop": true,
"aeroway": {
"excluded_values": {
"taxiway": true
}
},
"tourism": true,
"historic": true,
"public_transport": true,
"office": true,
"building:part": true,
"military": true,
"ruins": true,
"area:highway": true,
"craft": true,
"golf": true,
"indoor": {
"excluded_values": {
"yes": true,
"wall": true
}
},
"buildingpart": {
"excluded_values": {
"yes": true,
"wall": true
}
},
"room": true,
"department": true
}
......@@ -569,63 +569,6 @@
]
},
"details": {
"major": {
"opening_hours": {
"type": "hours",
"img": "clock",
"name": "Opening hours"
},
"contact:website": {
"type": "link",
"img": "web",
"name": "Website"
},
"website": {
"type": "link",
"img": "web",
"name": "Website"
},
"contact:email": {
"type": "email",
"img": "email",
"name": "E-mail"
},
"email": {
"type": "email",
"img": "email",
"name": "E-mail"
},
"contact:phone": {
"type": "text",
"img": "phone",
"name": "Phone"
},
"phone": {
"type": "text",
"img": "phone",
"name": "Phone"
},
"wheelchair": {
"type": "text_bind",
"img": "wheelchair",
"text_bind": { "yes": "Fully accessible", "limited": "Limited access", "no": "Not accessible" }
}
},
"minor": {
"cuisine": {
"type": "text",
"img": "cuisine",
"name": "Cuisine"
},
"description": {
"type": "text",
"img": "info",
"name": "More details"
}
}
},
"olddetails": {
"access": {
"name": "Access",
......
......@@ -18,6 +18,7 @@
var $ = require("jquery");
var L = require("leaflet");
var RuleSet = require("../model/mapcss/RuleSet");
var MainView = require("../view/Main");
var ServiceURL = require("./service/URL");
var ServiceLevelExport = require("./service/LevelExport");
......@@ -39,8 +40,7 @@ var Main = function(divId, configFolder, mode) {
/** The configuration **/
this.config = null;
this.style = null;
this.polygons = null;
this.styles = [ "" ];
this._initConfig(configFolder);
/** The OpenLevelUp mode (basic, advanced) **/
......@@ -77,7 +77,7 @@ var Main = function(divId, configFolder, mode) {
/** Data providers **/
this.data = {
osm: new ProviderDataOSM(this.config.osm.oapi, this.polygons, this.style.styles)/*,
osm: new ProviderDataOSM(this.config.osm.oapi, this.config.polygonFeatures, this.style.styles)/*,
notes: new ProviderDataNotes(this.config.osm.api)*/
};
......@@ -98,7 +98,7 @@ var Main = function(divId, configFolder, mode) {
this.divId,
this.mode,
this.config,
this.style,
this.styles,
this.newNote,
this.search,
this.data.osm,
......@@ -129,21 +129,42 @@ Main.prototype._initConfig = function(folder) {
success: function(data) { this.config = data; }.bind(this)
}).fail(function() { throw new Error("[Controller] Error while retrieving CONFIG"); });
//Load JSON style file
//Load MapCSS styles
var cf = this.config;
var st = this.styles;
$.ajax({
url: folder+'/style.json',
url: cf.mapcss.folder+'/',
async: false,
dataType: 'json',
success: function(data) { this.style = data; }.bind(this)
}).fail(function() { throw new Error("[Controller] Error while retrieving STYLE"); });
//Load PolygonFeatures file
$.ajax({
url: folder+'/polygon_features.json',
async: false,
dataType: 'json',
success: function(data) { this.polygons = data; }.bind(this)
}).fail(function() { throw new Error("[Controller] Error while retrieving POLYGON_FEATURES"); });
success: function(data){
//Parse the list of mapcss files
$(data).find("a:contains(.mapcss)").each(function(){
var file = $(this).attr("href");
var fileName = file.substring(file.lastIndexOf("/")+1);
if(cf.mapcss.default && fileName == cf.mapcss.default) {
st[0] = file;
}
else {
st.push(file);
}
});
//Then download them
for(var i=0; i < st.length; i++) {
$.ajax({
url: cf.mapcss.folder+'/'+st[i],
async: false,
dataType: 'text',
success: function(data) {
st[i] = RuleSet();
st[i].parseCSS(data);
}
}).fail(function() { throw new Error("[Controller] Error while retrieving MapCSS file: "+st[i]); });
}
}
}).fail(function() { throw new Error("[Controller] Error while retrieving MapCSS list"); });
this.styles = st;
console.log(this.styles);
};
......
......@@ -28,6 +28,9 @@ var Feature = function(f) {
//ATTRIBUTES
/** The human readable name of the object **/
this.name = null;
/** The human readable category of the object **/
this.category = null;
/** The OSM ID (for example "node/123456") **/
this.id = f.id;
......@@ -56,6 +59,19 @@ var Feature = function(f) {
//CONSTRUCTOR
Feature.prototype._init = function(f) {
//Find a category
var potentialTags = [ "amenity", "shop", "craft", "highway", "historic", "landuse", "man_made", "barrier", "office", "public_transport", "tourism" ];
var i = 0;
while(this.category === null && i < potentialTags.length) {
if(this.tags[potentialTags[i]]) { this.category = this.tags[potentialTags[i]]; }
i++;
}
if(this.category !== null) {
this.category = (this.category.charAt(0).toUpperCase() + this.category.slice(1)).replace(/_/g, " ");
}
//Find a name for this object
if(this.tags.name != undefined) {
this.name = this.tags.name;
......@@ -64,17 +80,7 @@ Feature.prototype._init = function(f) {
this.name = this.tags.ref;
}
else {
var potentialTags = [ "amenity", "shop", "craft", "highway", "historic", "landuse", "man_made", "barrier", "office", "public_transport", "tourism" ];
var i = 0;
while(this.name === null && i < potentialTags.length) {
if(this.tags[potentialTags[i]]) { this.name = this.tags[potentialTags[i]]; }
i++;
}
if(this.name !== null) {
this.name = (this.name.charAt(0).toUpperCase() + this.name.slice(1)).replace(/_/g, " ");
}
this.name = this.category;
}
//Parse levels
......
......@@ -32,10 +32,20 @@ var Spinner = require("./Spinner");
* OpenLevelUp!
* Web viewer for indoor mapping (based on OpenStreetMap data).
* Author: Adrien PAVIE
*
*/
/**
* Main view
* @param divId The placeholder ID in DOM
* @param mode The view mode (basic or advanced)
* @param config The configuration file as an Object
* @param rulesets An array of rulesets defining map styles
* @param newNoteService The new note service
* @param searchService The search service
* @param osmProvider The OSM data provider
* @param flickrProvider The flickr pictures provider
* @param options Some init options, like { tile: integer, level: float }
*/
var Main = function(divId, mode, config, style, newNoteService, searchService, osmProvider, flickrProvider, options) {
var Main = function(divId, mode, config, rulesets, newNoteService, searchService, osmProvider, flickrProvider, options) {
//ATTRIBUTES
/** The view mode (basic, advanced) **/
this.mode = (mode == "advanced") ? mode : "basic";
......@@ -73,6 +83,12 @@ var Main = function(divId, mode, config, style, newNoteService, searchService, o
/** The map buttons **/
this.buttons = {};
/** The available rulesets for map **/
this.rulesets = rulesets;
/** The ruleset to use **/
this.currentRuleset = 0;
/** The map layers currently shown **/
this.layers = { tile: null, data: null, overlays: [] };
......@@ -350,13 +366,14 @@ var Main = function(divId, mode, config, style, newNoteService, searchService, o
this.layersManager.setOSMFeatures(
d,
this.rulesets[this.currentRuleset],
{
folder: config.view.icons.folder,
size: config.view.icons.size,
clickHandler: function(feature) {
this.side.contents.feature.set(
feature,
style.details,
config.feature.details,
{
iconFolder: config.view.icons.folder,
mapillaryClient: config.images.mapillary.clientId
......
......@@ -138,15 +138,15 @@ MapLayersManager.prototype.setOSMFeatures = function(f, ruleset, options) {
fLayer = L.featureGroup();
fLayerEdited = false;
// if(fid == "way/63904146") {
// if(fid == "node/3652512272") {
// console.log(feature);
// console.log(feature.getStyle().style);
// console.log(feature.style);
// }
/*
* Shape styles
*/
if(feature.style.shapeStyles.default != undefined) {
if(feature.style.shapeStyles.default != undefined && feature.geometry.type != "Point") {
fStyle = feature.style.shapeStyles.default;
fLayer.addLayer(
L.GeoJSON.geometryToLayer(
......
......@@ -51,8 +51,8 @@ Feature.prototype.get = function() {
if(this._feature != null) {
var title = $(
"<div class=\"side-content-feature-title\"><h2>"+this._feature.name+"</h2>"+
((this._feature.getStyle().name != this._feature.name) ? "<span>"+this._feature.getStyle().name+"</span>" : "<span>Precise name unknown</span>")+
"<div class=\"side-content-feature-title\"><h2>"+((this._feature.name) ? this._feature.name : ((this._feature.category) ? this._feature.category : this._feature.id))+"</h2>"+
((this._feature.category != this._feature.name && this._feature.category != null) ? "<span>"+this._feature.category+"</span>" : "<span>Precise name unknown</span>")+
"</div>"
);
element.append(title);
......
meta {
title: "Default";
}
node, way {
width: 5;
opacity: 0.9;
......
......@@ -8,7 +8,6 @@ var L = require("leaflet");
var config = null;
var style = null;
var polygons = null;
//Load config file
$.ajax({
......@@ -18,27 +17,20 @@ $.ajax({
success: function(data) { config = data; }
}).fail(function() { throw new Error("[Controller] Error while retrieving CONFIG"); });
//Load JSON style file
//Load style file
$.ajax({
url: 'conf/style.json',
url: 'styles/default.mapcss',
async: false,
dataType: 'json',
success: function(data) { style = data; }
dataType: 'text',
success: function(data) {
style = new OLU.model.mapcss.RuleSet();
style.parseCSS(data);
}
}).fail(function() { throw new Error("[Controller] Error while retrieving STYLE"); });
//Load PolygonFeatures file
$.ajax({
url: 'conf/polygon_features.json',