Commit 71c9cc3c authored by Adrien Pavie's avatar Adrien Pavie
Browse files

Starting creating basic mode MapCSS, some features added to render icons

parent a56468d9
......@@ -29,7 +29,8 @@ Canvas properties aren't supported. For background customization you should use
* `fill-opacity`
### Point or icon
* `icon-image`
* `icon-image`: the URL of an image (example: `icon-image: url('my_icon.png');`). A joker can be used to replace a part of the icon URL by a tag value of rendered feature using `$[tag]` (example: `icon-image: url('icon_for_room_$[room].png');`)
* `icon-image-aliases`: when using a joker in `icon-image`, some tag values can be replaced by other ones using this property (example `icon-image-aliases: '"amphitheatre": "auditorium", "reception": "administration"';`)
* `icon-width`
* `icon-height`
* `icon-opacity`
......
......@@ -2,55 +2,6 @@
"styles": {
"buildingpart|indoor|room": [
{
"name": "Room",
"description": "Indoor rooms",
"onTags": [ { "indoor": "room" }, { "buildingpart": "room" } ],
"style": { "color": "#AAAAAA", "opacity": 1, "weight": 2.5, "fillColor": "#E0E0E0", "fillOpacity": 1, "layer": -5, "popup": "yes" }
},
{
"name": "Wall",
"description": "Indoor walls",
"onTags": [ { "indoor": "wall" }, { "buildingpart": "wall" } ],
"style": { "color": "#999999", "opacity": 1, "weight": 2.5, "fillColor": "#999999", "fillOpacity": 1, "popup": "yes", "layer": -2 }
},
{
"name": "Area",
"description": "Indoor areas",
"onTags": [ { "indoor": "area" } ],
"style": { "color": "#AAAAAA", "opacity": 1, "weight": 0.8, "fillColor": "#EEEEEE", "fillOpacity": 1, "layer": -6, "label": "name", "labelStyle": "area" }
},
{
"name": "Hall",
"description": "Indoor hall with walls",
"onTags": [ { "indoor": "corridor" }, { "buildingpart": "corridor|hall" }, { "room": "corridor|hall|entry|gallery|collection" } ],
"style": { "color": "#AAAAAA", "opacity": 1, "weight": 2.5, "fillColor": "#EEEEEE", "fillOpacity": 1, "layer": -5, "label": "name", "labelStyle": "area" }
},
{
"name": "Entrance",
"onTags": [ { "room": "entrance" } ],
"style": { "fillColor": "#EEEEEE" }
},
{
"name": "${room}",
"description": "Rooms",
"onTags": [ { "room": "*" } ],
"style": {
"icon": "room_${room}.png",
"iconAlias": { "amphitheatre": "auditorium", "reception": "administration", "refectory": "restaurant", "checkroom": "locker" },
"showMissingIcon": false
}
},
{
"name": "${area} (area)",
"description": "Areas",
"onTags": [ { "area": "*" } ],
"style": {
"icon": "room_${area}.png",
"iconAlias": { "amphitheatre": "auditorium", "reception": "administration", "refectory": "restaurant", "checkroom": "locker" },
"showMissingIcon": false
}
},
{
"name": "Vertical passage",
"description": "Elevetor, stairs (as polygons)",
......
......@@ -37,29 +37,3 @@
text-shadow: 0px 0px 3px rgba(255,255,255,1);
}
/** Walkable areas **/
.feature-label.area {
color: #252525;
font-size: 0.9em;
}
/** Shops **/
.feature-label.shop {
color: #AC39AC;
}
/** Amenity **/
.feature-label.amenity {
color: #3E3E3E;
font-weight: bold;
}
/** Railway **/
.feature-label.railway {
color: black;
}
/** Tourism **/
.feature-label.tourism {
color: #0099E4;
}
......@@ -7,10 +7,11 @@ var Style = require("./Style");
*/
var PointStyle = function() {this.__init__()};
PointStyle.prototype = {
properties: ['icon_image','icon_width','icon_height','icon_opacity','rotation'],
properties: ['icon_image','icon_width','icon_height','icon_opacity','rotation','icon_image_aliases'],
icon_image: null,
icon_width: 0,
icon_height: NaN,
icon_image_aliases: '',
rotation: NaN,
styleType: 'PointStyle',
......@@ -22,6 +23,12 @@ PointStyle.prototype = {
return this.evals.icon_width ? 0 : this.icon_width;
},
setImageAliases:function() {
if(this.icon_image_aliases.replace) {
var json = '{ '+this.icon_image_aliases.replace(/'/g, "")+' }';
this.icon_image_aliases = JSON.parse(json);
}
}
};
//Inherit from Style
......
......@@ -29,7 +29,7 @@ Rule.prototype = {
test: function(entity,tags,zoom) {
// summary: Evaluate the Rule on the given entity, tags and zoom level.
// returns: true if the Rule passes, false if the conditions aren't fulfilled.
if ((this.subject !== '') && !entity.isSubject(this.subject)) {
if (this.subject !== '' && this.subject !== '*' && !entity.isSubject(this.subject)) {
return false;
}
if (zoom<this.minZoom || zoom>this.maxZoom) { return false; }
......
......@@ -277,7 +277,7 @@ RuleSet.prototype = {
ZOOM :/^\|\s*z([\d\-]+)\s*/i,
GROUP :/^,\s*/i,
CONDITION :/^\[(.+?)\]\s*/,
OBJECT :/^(\w+)\s*/, // TODO: match also "*" (and handle the wildcard appropriately)
OBJECT :/^(\w+|\*)\s*/,
DECLARATION :/^\{(.+?)\}\s*/,
SUBPART :/^::(\w+)\s*/,
UNKNOWN :/^(\S+)\s*/,
......
......@@ -63,6 +63,7 @@ StyleChooser.prototype = {
case 'TextStyle' : a=sl.textStyles; break;
case 'MetaStyle' : a=sl.metaStyles; break;
case 'PointStyle' : sl.maxwidth=Math.max(sl.maxwidth,r.maxwidth());
r.setImageAliases();
a=sl.pointStyles; break;
case 'InstructionStyle':
if (r.breaker) { return; }
......
......@@ -125,7 +125,8 @@ MapLayersManager.prototype.setOSMFeatures = function(f, ruleset, options) {
var feature, fid, fLayer, fStyle, fLayerEdited, fClickHandler;
var fLevel, fIconUrl, fIconCoords, fIconAngle, coord1, coord2;
var midSegment;
var midSegment, fIconRgxTagName, fIconRgxTagValue;
var fIconRgx = /\$\[(\w+)\]/;
fClickHandler = options.clickHandler;
......@@ -179,6 +180,20 @@ MapLayersManager.prototype.setOSMFeatures = function(f, ruleset, options) {
fStyle = feature.style.pointStyles.default;
fIconUrl = /url\(\'(.+)\'\)/.exec(fStyle.icon_image)[1];
//Replace joker values in icon URL
while(fIconRgx.test(fIconUrl)) {
//Replace tag name with actual tag value
fIconRgxTagName = fIconRgx.exec(fIconUrl)[1];
fIconRgxTagValue = feature.getTag(fIconRgxTagName);
//If an alias exists for the given value, replace
if(feature.style.pointStyles.default.icon_image_aliases[fIconRgxTagValue]) {
fIconRgxTagValue = feature.style.pointStyles.default.icon_image_aliases[fIconRgxTagValue];
}
fIconUrl = fIconUrl.replace(fIconRgx, fIconRgxTagValue);
}
if(fIconUrl.length > 0) {
fLayer.addLayer(L.marker(
feature.geometry.getLabelPosition(),
......
......@@ -2,30 +2,119 @@ meta {
title: 'Default';
}
node, way {
width: 5;
opacity: 0.9;
color: blue;
fill-color: blue;
fill-opacity: 0.5;
z-index: 1;
icon-image: url('icon_default.png');
icon-width: 24;
icon-height: 24;
icon-opacity: 0.7;
/****************************************************************************
* Labels
*/
*[name] {
font-family: Arial;
font-size: 12;
font-weight: bold;
font-style: italic;
text-color: red;
text-opacity: 0.5;
text-color: black;
text-offset: -12;
text: name;
/*text-position: line;*/
}
line {
line[name] {
text-position: line;
}
*[name][amenity] {
text-color: #3E3E3E;
}
*[name][shop] {
text-color: #AC39AC;
}
*[name][tourism] {
text-color: #0099E4;
}
/****************************************************************************
* Indoor structures
*/
/*
* Surface of objects
*/
/** Rooms **/
area[indoor=room],
area[buildingpart=room],
area[room],
relation[type=multipolygon][indoor=room],
relation[type=multipolygon][buildingpart=room],
relation[type=multipolygon][room] {
fill-color: #E0E0E0;
fill-opacity: 1;
z-index: -5;
}
/** Walls **/
area[indoor=wall],
relation[type=multipolygon][indoor=wall] {
fill-color: #999999;
fill-opacity: 1;
z-index: -2;
}
/** Areas (travelling spaces) **/
area[indoor=~/area|corridor/],
area[buildingpart=~/corridor|hall/],
area[room=~/corridor|hall|entry|gallery|collection|entrance/],
relation[type=multipolygon][indoor=~/area|corridor/],
relation[type=multipolygon][buildingpart=~/corridor|hall/],
relation[type=multipolygon][room=~/corridor|hall|entry|gallery|collection|entrance/] {
fill-color: #EEEEEE;
fill-opacity: 1;
z-index: -6;
}
/*
* Walls of objects
*/
/** Hard wall **/
area[indoor=~/room|corridor|wall/],
area[buildingpart=~/room|corridor|hall/],
area[room],
relation[type=multipolygon][indoor=~/room|corridor/],
relation[type=multipolygon][buildingpart=~/room|corridor|hall/],
relation[type=multipolygon][room] {
color: #999999;
opacity: 1;
width: 2.5;
}
/** No wall **/
area[indoor=area],
relation[type=multipolygon][indoor=area] {
color: #AAAAAA;
opacity: 1;
width: 0.5;
}
/*
* Room/area icons
*/
area[room],
area[area],
relation[type=multipolygon][room],
relation[type=multipolygon][area] {
icon-image-aliases: '"amphitheatre": "auditorium", "reception": "administration", "refectory": "restaurant", "checkroom": "locker"';
icon-width: 24;
icon-height: 24;
icon-opacity: 1;
}
area[room],
relation[type=multipolygon][room] {
icon-image: url('room_$[room].png');
}
area[area],
relation[type=multipolygon][area] {
icon-image: url('room_$[area].png');
}
......@@ -45,9 +45,9 @@ var flickrProvider = new OLU.ctrl.provider.picture.Flickr(config.images.flickr.a
var mainview = new OLU.view.Main("olu", "basic", config, style, newNoteService, searchService, osmProvider, flickrProvider);
//Tests
setTimeout(
function() {
mainview.changeRuleset(1);
},
10000
);
// setTimeout(
// function() {
// mainview.changeRuleset(1);
// },
// 10000
// );
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment