entrouvert
/
combo
16
1
Fork 0
Code Issues Pull Requests 11 Releases Wiki Activity

maps: restyle map markers (#17542)

This commit is contained in:
Frédéric Péters 2017-07-11 15:11:07 +02:00
parent 6260d3aedc
commit 87dee7235f
4 changed files with 22 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
combo/apps/maps/migrations/0001_initial.py
View File

@ -19,7 +19,7 @@ class Migration(migrations.Migration):
('geojson_url', models.URLField(max_length=1024, verbose_name='Geojson URL')),
('marker_colour', models.CharField(default=b'#0000FF', max_length=7, verbose_name='Marker colour')),
('icon', models.CharField(blank=True, max_length=32, null=True, verbose_name='Marker icon', choices=[(b'book', 'Book'), (b'house', 'House'), (b'building', 'Building'), (b'hospital', 'Hospital'), (b'ambulance', 'Ambulance'), (b'taxi', 'Taxi'), (b'subway', 'Subway'), (b'wheelchair', 'Wheelchair'), (b'bicycle', 'Bicycle'), (b'car', 'Car'), (b'train', 'Train'), (b'bus', 'Bus'), (b'motorcycle', 'Motorcycle'), (b'truck', 'Truck')])),
('icon_colour', models.CharField(default=b'#FFFFFF', max_length=7, verbose_name='Icon colour')),
('icon_colour', models.CharField(default=b'#000000', max_length=7, verbose_name='Icon colour')),
],
options={'ordering': ('label',)}
),

2
combo/apps/maps/models.py
View File

@ -61,7 +61,7 @@ class MapLayer(models.Model):
marker_colour = models.CharField(_('Marker colour'), max_length=7, default='#0000FF')
icon = models.CharField(_('Marker icon'), max_length=32, blank=True, null=True,
choices=ICONS)
icon_colour = models.CharField(_('Icon colour'), max_length=7, default='#FFFFFF')
icon_colour = models.CharField(_('Icon colour'), max_length=7, default='#000000')
cache_duration = models.PositiveIntegerField(_('Cache duration'), default=60)
include_user_identifier = models.BooleanField(
_('Include user identifier in request'),

24
combo/apps/maps/static/css/combo.map.css
View File

@ -9,16 +9,25 @@ div.leaflet-div-icon span {
width: 2.3em;
height: 2.3em;
display: block;
left: -1em;
top: -1em;
left: -1.15em; /* 2.3 / 2 */
top: -3em; /* 2.3 * 1.2 */
position: relative;
border-radius: 11em 6em 0.8em;
transform: scale(1, 1.3) rotate(45deg);
border: 1px solid #aaa;
box-sizing: border-box;
}
div.leaflet-popup-content span {
div.leaflet-div-icon span {
border: 1px solid white;
box-shadow: 0 0 0 1px #aaa;
}
div.leaflet-div-icon span i {
display: block;
width: 100%;
text-align: center;
transform: translateY(50%) rotate(-45deg);
height: 50%;
}
div.leaflet-popup-content span.field-value {
@ -27,8 +36,11 @@ div.leaflet-popup-content span.field-value {
div.leaflet-div-icon span i:before {
display: inline-block;
margin: 9px;
transform: scale(1.1) rotate(-45deg);
background: white;
border-radius: 100%;
padding: 0.5ex;
transform: scale(1.3, 1);
margin-top: -0.3ex;
}
/* leaflet markers icons */

3
combo/apps/maps/static/js/combo.map.js
View File

@ -15,7 +15,8 @@ $(function() {
},
pointToLayer: function (feature, latlng) {
var markerStyles = "background-color: " + feature.properties.layer.colour + ";";
marker = L.divIcon({iconAnchor: [0, 30],
marker = L.divIcon({
iconAnchor: [0, 0],
popupAnchor: [5, -45],
html: '<span style="' + markerStyles + '"><i class="leaflet-marker-icon ' +
feature.properties.layer.icon + '" style="color:' +