mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-07 19:58:24 -04:00
Move styling into separate files for reuse
This commit is contained in:
@@ -0,0 +1,57 @@
|
|||||||
|
<script src="{{ asset_url('javascripts/leaflet.js') }}"></script>
|
||||||
|
<script>
|
||||||
|
var mapElement = document.getElementById('map');
|
||||||
|
mapElement.style.height = Math.max(320, window.innerHeight - mapElement.offsetTop - 100) + 'px';
|
||||||
|
var mymap = L.map(
|
||||||
|
'map',
|
||||||
|
{
|
||||||
|
scrollWheelZoom: false
|
||||||
|
}
|
||||||
|
)
|
||||||
|
var polygons = []
|
||||||
|
|
||||||
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||||
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||||
|
}).addTo(mymap);
|
||||||
|
|
||||||
|
{% for polygon in broadcast_message.simple_polygons.bleed.as_coordinate_pairs_lat_long %}
|
||||||
|
polygons.push(
|
||||||
|
L.polygon({{polygon}}, {
|
||||||
|
opacity: 0.5,
|
||||||
|
color: '#2B8CC4', // $light-blue
|
||||||
|
fillColor: '#2B8CC4', // $light-blue
|
||||||
|
fillOpacity: 0.2,
|
||||||
|
weight: 2
|
||||||
|
})
|
||||||
|
);
|
||||||
|
{% endfor %}
|
||||||
|
|
||||||
|
{% for polygon in broadcast_message.simple_polygons.as_coordinate_pairs_lat_long %}
|
||||||
|
polygons.push(
|
||||||
|
L.polygon({{polygon}}, {
|
||||||
|
opacity: 0.1,
|
||||||
|
color: '#2B8CC4', // $black
|
||||||
|
fillColor: '#2B8CC4', // $light-blue
|
||||||
|
fillOpacity: 0.4,
|
||||||
|
weight: 1
|
||||||
|
})
|
||||||
|
);
|
||||||
|
{% endfor %}
|
||||||
|
|
||||||
|
{% for polygon in broadcast_message.polygons.as_coordinate_pairs_lat_long %}
|
||||||
|
polygons.push(
|
||||||
|
L.polygon({{polygon}}, {
|
||||||
|
color: '#0b0b0c', // $black
|
||||||
|
fillOpacity: 0,
|
||||||
|
weight: 2
|
||||||
|
})
|
||||||
|
);
|
||||||
|
{% endfor %}
|
||||||
|
|
||||||
|
var polygonGroup = L.featureGroup(polygons).addTo(mymap);
|
||||||
|
mymap.fitBounds(
|
||||||
|
polygonGroup.getBounds(),
|
||||||
|
{padding: [1, 1]}
|
||||||
|
);
|
||||||
|
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
<link rel="stylesheet" href="{{ asset_url('stylesheets/leaflet.css') }}" />
|
||||||
|
<style>
|
||||||
|
#map {
|
||||||
|
z-index: 50;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
border: 1px solid #b1b4b6;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -9,74 +9,11 @@
|
|||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block extra_stylesheets %}
|
{% block extra_stylesheets %}
|
||||||
<link rel="stylesheet" href="{{ asset_url('stylesheets/leaflet.css') }}" />
|
{% include "views/broadcast/partials/area-map-stylesheets.html" %}
|
||||||
<style>
|
|
||||||
#map {
|
|
||||||
z-index: 50;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
border: 1px solid #b1b4b6;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block extra_javascripts %}
|
{% block extra_javascripts %}
|
||||||
<script src="{{ asset_url('javascripts/leaflet.js') }}"></script>
|
{% include "views/broadcast/partials/area-map-javascripts.html" %}
|
||||||
<script>
|
|
||||||
var mapElement = document.getElementById('map');
|
|
||||||
mapElement.style.height = Math.max(320, window.innerHeight - mapElement.offsetTop - 100) + 'px';
|
|
||||||
var mymap = L.map(
|
|
||||||
'map',
|
|
||||||
{
|
|
||||||
scrollWheelZoom: false
|
|
||||||
}
|
|
||||||
)
|
|
||||||
var polygons = []
|
|
||||||
|
|
||||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
||||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
||||||
}).addTo(mymap);
|
|
||||||
|
|
||||||
{% for polygon in broadcast_message.simple_polygons.bleed.as_coordinate_pairs_lat_long %}
|
|
||||||
polygons.push(
|
|
||||||
L.polygon({{polygon}}, {
|
|
||||||
opacity: 0.5,
|
|
||||||
color: '#2B8CC4', // $light-blue
|
|
||||||
fillColor: '#2B8CC4', // $light-blue
|
|
||||||
fillOpacity: 0.2,
|
|
||||||
weight: 2
|
|
||||||
})
|
|
||||||
);
|
|
||||||
{% endfor %}
|
|
||||||
|
|
||||||
{% for polygon in broadcast_message.simple_polygons.as_coordinate_pairs_lat_long %}
|
|
||||||
polygons.push(
|
|
||||||
L.polygon({{polygon}}, {
|
|
||||||
opacity: 0.1,
|
|
||||||
color: '#2B8CC4', // $black
|
|
||||||
fillColor: '#2B8CC4', // $light-blue
|
|
||||||
fillOpacity: 0.4,
|
|
||||||
weight: 1
|
|
||||||
})
|
|
||||||
);
|
|
||||||
{% endfor %}
|
|
||||||
|
|
||||||
{% for polygon in broadcast_message.polygons.as_coordinate_pairs_lat_long %}
|
|
||||||
polygons.push(
|
|
||||||
L.polygon({{polygon}}, {
|
|
||||||
color: '#0b0b0c', // $black
|
|
||||||
fillOpacity: 0,
|
|
||||||
weight: 2
|
|
||||||
})
|
|
||||||
);
|
|
||||||
{% endfor %}
|
|
||||||
|
|
||||||
var polygonGroup = L.featureGroup(polygons).addTo(mymap);
|
|
||||||
mymap.fitBounds(
|
|
||||||
polygonGroup.getBounds(),
|
|
||||||
{padding: [1, 1]}
|
|
||||||
);
|
|
||||||
|
|
||||||
</script>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block maincolumn_content %}
|
{% block maincolumn_content %}
|
||||||
|
|||||||
Reference in New Issue
Block a user