Skip to content

Commit

Permalink
refactor: other things crept in, hardly complete, enough to close #3
Browse files Browse the repository at this point in the history
  • Loading branch information
@erictheise
erictheise committed Mar 16, 2020
1 parent c05e5bd commit 4c252ae
Show file tree
Hide file tree
Showing 6 changed files with 198 additions and 131 deletions.
68 changes: 68 additions & 0 deletions maps/static/maps/js/cards.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
export const generateCards = (map, layers) => {
let visibleFeatures = map.queryRenderedFeatures({layers: layers});
if (visibleFeatures) {
let htmlString = '<ul class="cards">\n';
visibleFeatures.forEach(function (f) {
htmlString += `<li class="card__wrapper"><article id="${f.id}" class="card"><header><h3 class="card___title"><span class="card__format">${f.properties.category.toUpperCase()}</span><span class="screen-reader-text">: </span></h3></header><aside class="card__aside">\n<h4>${f.properties.name}</h4><br />`;
if (f.properties.sectors) {
htmlString += `<strong>${f.properties.sectors.replace('[', '').replace(']', '').replace(/","/g, ', ').replace(/"/g, '')}</strong><br />`;
}
if (f.properties.city) {
htmlString += `${f.properties.city} `;
}
if (f.properties.state) {
htmlString += `${f.properties.state} `;
}
if (f.properties.country) {
htmlString += `${f.properties.country}`;
}
htmlString += '</aside></article></li>';
});
htmlString += '</ul>';
document.getElementById('visibles').innerHTML = htmlString;

[...document.getElementsByTagName('article')].forEach(function (article) {
article.addEventListener('click', function () {
window.location = `/maps/organizations/${article.id}`;
});
});
}
};

export const generatePopupHtml = (f) => {
let
htmlString = '';
if (f.properties.url) {
htmlString += `<strong><a href="${f.properties.url}">${f.properties.name}</a></strong><br />`;
} else {
htmlString += `<strong>${f.properties.name}</strong><br />`;
}
if (f.properties.address) {
htmlString += `${f.properties.address}<br />`
}
if (f.properties.city) {
htmlString += `${f.properties.city} `
}
if (f.properties.state) {
htmlString += `${f.properties.state} `
}
if (f.properties.postal_code) {
htmlString += `${f.properties.postal_code} `
}
if (f.properties.country) {
htmlString += `${f.properties.country} `
}
if (f.properties.type || f.properties.category || f.properties.sectors) {
htmlString += '<hr>';
}
if (f.properties.type) {
htmlString += `Type: ${f.properties.type}<br />`
}
if (f.properties.category) {
htmlString += `Category: ${f.properties.category}<br />`
}
if (f.properties.sectors) {
htmlString += `Sectors: ${f.properties.sectors.replace('[', '').replace(']', '').replace(/","/g, ', ').replace(/"/g, '')}`;
}
return htmlString;
};
111 changes: 19 additions & 92 deletions maps/static/maps/js/app.js → maps/static/maps/js/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import { generateCards, generatePopupHtml } from './cards.js';

mapboxgl.accessToken = 'pk.eyJ1IjoiZXJpY3RoZWlzZSIsImEiOiJjazVvNGNmM2wxaGhjM2pvMGc0ZmIyaXN3In0.Jrt9t5UrY5aCbndSpq5JWw';
var map = new mapboxgl.Map({
container: 'map', // container id
container: 'map',
style: 'mapbox://styles/mapbox/dark-v10',
center: [-74.5, 40], // starting position [lng, lat]
center: [-74.5, 40],
zoom: 4,
hash: true,
scrollZoom: false
Expand Down Expand Up @@ -110,8 +112,17 @@ map.on('load', function () {
source: 'organizations',
filter: ['!', ['has', 'point_count']],
paint: {
'circle-color': '#11b4da',
'circle-radius': 4,
'circle-color': [
'match',
['get', 'category'],
'platform co-op', colorScale('platformCoop'),
'co-op-run platform', colorScale('coopRunPlatform'),
'shared platform', colorScale('sharedPlatform'),
'supporter', colorScale('supporter'),
'other', colorScale('other'),
'#999'
],
'circle-radius': 8,
'circle-stroke-width': 1,
'circle-stroke-color': '#fff'
}
Expand All @@ -137,34 +148,13 @@ map.on('load', function () {

map.on('click', 'unclustered-point', function (e) {
map.getCanvas().style.cursor = 'pointer';
let
htmlString = '';
if (e.features[0].properties.url) {
htmlString += `<strong><a href="${e.features[0].properties.url}">${e.features[0].properties.name}</a></strong><br />`;
} else {
htmlString += `<strong>${e.features[0].properties.name}</strong><br />`;
}
if (e.features[0].properties.address) { htmlString += `${e.features[0].properties.address}<br />`}
if (e.features[0].properties.city) { htmlString += `${e.features[0].properties.city} `}
if (e.features[0].properties.state) { htmlString += `${e.features[0].properties.state} `}
if (e.features[0].properties.postal_code) { htmlString += `${e.features[0].properties.postal_code} `}
if (e.features[0].properties.country) { htmlString += `${e.features[0].properties.country} `}
if (e.features[0].properties.type || e.features[0].properties.category || e.features[0].properties.sectors) {
htmlString += '<hr>';
}
if (e.features[0].properties.type) { htmlString += `Type: ${e.features[0].properties.type}<br />`}
if (e.features[0].properties.category) { htmlString += `Category: ${e.features[0].properties.category}<br />`}
if (e.features[0].properties.sectors) {
htmlString += `Sectors: ${e.features[0].properties.sectors.replace('[', '').replace(']', '').replace(/","/g, ', ').replace(/"/g, '')}`;
}

let popup = new mapboxgl.Popup({
closeButton: true,
closeOnClick: true
});

popup.setLngLat(e.features[0].geometry.coordinates)
.setHTML(htmlString)
.setHTML(generatePopupHtml(e.features[0]))
.addTo(map);
});

Expand All @@ -175,43 +165,13 @@ map.on('load', function () {
map.getCanvas().style.cursor = '';
});

let makeCardList = () => {
let visibleFeatures = map.queryRenderedFeatures({layers: ['unclustered-point']});

if (visibleFeatures) {
htmlString = '<ul class="cards">\n';
visibleFeatures.forEach(function (f) {
htmlString += `<li class="card__wrapper"><article id="${f.id}" class="card"><header><h3 class="card___title"><span class="card__format">${f.properties.category.toUpperCase()}</span><span class="screen-reader-text">: </span></h3></header><aside class="card__aside">\n<h4>${f.properties.name}</h4><br />`;
if (f.properties.sectors) {
htmlString += `<strong>${f.properties.sectors.replace('[', '').replace(']', '').replace(/","/g, ', ').replace(/"/g, '')}</strong><br />`;
}
if (f.properties.city) {
htmlString += `${f.properties.city} `;
}
if (f.properties.state) {
htmlString += `${f.properties.state} `;
}
if (f.properties.country) {
htmlString += `${f.properties.country}`;
}
htmlString += '</aside></article></li>';
});
htmlString += '</ul>';
document.getElementById('visibles').innerHTML = htmlString;

[...document.getElementsByTagName('article')].forEach(function (article) {
article.addEventListener('click', function () {
window.location = `/maps/organizations/${article.id}`;
});
});
}
};
generateCards(map, ['unclustered-point']);

map.on('render', function () {
makeCardList();
generateCards(map, ['unclustered-point']);
});
map.on('moveend', function () {
makeCardList();
generateCards(map, ['unclustered-point']);
});

// map.addLayer({
Expand Down Expand Up @@ -294,37 +254,4 @@ map.on('load', function () {
// return point_counts;
// };

/*
map.on('mouseover', 'organizations', function (e) {
map.getCanvas().style.cursor = 'pointer';
let
htmlString = '';
if (e.features[0].properties.url) {
htmlString += '<strong><a href="' + e.features[0].properties.url + '">' + e.features[0].properties.name + '</a></strong><br />'
} else {
htmlString += '<strong>' + e.features[0].properties.name + '</strong><br />'
}
if (e.features[0].properties.address !== 'null') { htmlString += e.features[0].properties.address + '<br />' }
if (e.features[0].properties.city !== 'null') { htmlString += e.features[0].properties.city + ' '}
if (e.features[0].properties.state !== 'null') { htmlString += e.features[0].properties.state + ' ' }
if (e.features[0].properties.postal_code !== 'null') { htmlString += e.features[0].properties.postal_code + ' ' }
if (e.features[0].properties.country !== 'null') { htmlString += e.features[0].properties.country + ' ' }
if (e.features[0].properties.type !== 'null' || e.features[0].properties.type !== 'null') { htmlString += '<hr>' }
if (e.features[0].properties.type !== 'null') { htmlString += 'Type: ' + e.features[0].properties.type + '<br />'}
if (e.features[0].properties.type !== 'null') { htmlString += 'Category: ' + e.features[0].properties.category + '<br />' }
if (e.features[0].properties.sectors !== 'null') {
htmlString += 'Sectors: ' + e.features[0].properties.sectors.replace('[', '').replace(']', '').replace(/","/g, ', ').replace(/"/g, '');
}
popup.setLngLat(e.features[0].geometry.coordinates)
.setHTML(htmlString)
.addTo(map);
});
map.on('mouseleave', 'organizations', function () {
map.getCanvas().style.cursor = '';
popup.remove();
})
*/

});
2 changes: 1 addition & 1 deletion maps/templates/maps/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,6 @@ <h1><span class="pc-ff--sans pc-fw--normal">Platform Co-op</span><br/> Directory
</div>
{% include 'maps/search.html' %}
<div id="map"></div>
<script src="{% static 'maps/js/app.js' %}"></script>
<script src="{% static 'maps/dist/js/site.js' %}"></script>
<div id="visibles"></div>
{% endblock %}
19 changes: 17 additions & 2 deletions mdi/serializers.py
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,30 @@
from rest_framework import serializers
from accounts.models import User
from django.contrib.auth.models import Group
from mdi.models import Organization, Sector, Tool, License, Language
from mdi.models import Organization, SocialNetwork, Sector, Tool, License, Language
from rest_framework_gis.serializers import GeoFeatureModelSerializer
from django_countries.serializers import CountryFieldMixin


# class UserSerializer(CountryFieldMixin, GeoFeatureModelSerializer):
class UserSerializer(serializers.HyperlinkedModelSerializer):
class Meta:
model = User
fields = ('username', 'id', 'email', 'groups')
fields = (
'id',
'email',
'first_name',
'middle_name',
'last_name',
'address',
'city',
'state',
'postal_code',
'country',
'url',
'bio',
'notes'
)


class GroupSerializer(serializers.HyperlinkedModelSerializer):
Expand Down
Loading

0 comments on commit 4c252ae

Please sign in to comment.