Skip to content

Commit

Permalink
Merge pull request #150 from CityOfDetroit/feature.144
Browse files Browse the repository at this point in the history 
Setting up map component modes, fixing dev conflicts.
  • Loading branch information
@jedgar1mx
jedgar1mx authored Feb 6, 2024
2 parents 3b4dd57 + 9b531ba commit da4f2ce
Show file tree
Hide file tree
Showing 9 changed files with 131 additions and 86 deletions.
2 changes: 1 addition & 1 deletion build/assets/js/main.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion build/assets/js/runtime.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions build/assets/js/vendors.maplibre-gl.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion build/index.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<head><script defer="defer" src="assets/js/runtime.js"></script><script defer="defer" src="assets/js/vendors.babel.js"></script><script defer="defer" src="assets/js/main.js"></script></head><script src="index.js"></script>
<head><script defer="defer" src="assets/js/runtime.js"></script><script defer="defer" src="assets/js/vendors.babel.js"></script><script defer="defer" src="assets/js/vendors.maplibre-gl.js"></script><script defer="defer" src="assets/js/main.js"></script></head><script src="index.js"></script>
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build",
"deploy-storybook": "storybook-to-ghpages",
"test-storybook": "test-storybook",
"test-storybook": "test-storybook --maxWorkers=2 --coverage",
"release": "auto shipit --base-branch=dev",
"chromatic": "chromatic --exit-zero-on-changes"
},
Expand Down
181 changes: 100 additions & 81 deletions src/components/organisms/Map/Map.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import styles from '!!raw-loader!./Map.css';
import maplibreStyles from '!!raw-loader!../../../../node_modules/maplibre-gl/dist/maplibre-gl.css';
export default class Map extends HTMLElement {
static get observedAttributes() {
return ['data-map-state'];
return ['data-map-state', 'data-map-mode'];
}

constructor() {
Expand All @@ -25,109 +25,90 @@ export default class Map extends HTMLElement {
shadow.appendChild(this.styles);

// Attach the created element to the shadow DOM
const app = document.getElementsByTagName('my-home-info');
const mapWrapper = document.createElement('section');
mapWrapper.id = 'map-wrapper';
this.mapWrapper = document.createElement('section');
this.mapWrapper.id = 'map-wrapper';
const mapContainer = document.createElement('article');
mapContainer.id = 'map';
mapWrapper.appendChild(mapContainer);
const closeMapBtn = document.createElement('cod-button');
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line no-unused-vars
closeMapBtn.addEventListener('click', (ev) => {
app[0].setAttribute('data-app-state', 'results');
});
closeMapBtn.setAttribute('data-primary', true);
closeMapBtn.setAttribute('data-label', 'x');
closeMapBtn.setAttribute('data-size', 'large');
closeMapBtn.setAttribute('data-hover', false);
closeMapBtn.setAttribute('data-background-color', 'color-3');
closeMapBtn.setAttribute('data-img', '');
closeMapBtn.setAttribute('data-img-alt', '');
closeMapBtn.setAttribute('data-icon', '');
closeMapBtn.setAttribute('data-shape', 'square');
shadow.appendChild(mapWrapper);
mapWrapper.appendChild(closeMapBtn);
this.mapWrapper.appendChild(mapContainer);
shadow.appendChild(this.mapWrapper);

this.map = new maplibregl.Map({
container: mapContainer,
style: mapStyle,
center: [-83.1, 42.36],
zoom: 9,
});
app[0].setAttribute('data-map-state', 'init');
}

// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line no-unused-vars
attributeChangedCallback(name, oldValue, newValue) {
const app = document.getElementsByTagName('my-home-info');
const parcel = JSON.parse(app[0].getAttribute('data-parcel-id'));
const coord = [parcel.location.x, parcel.location.y];
switch (name) {
case 'data-map-state':
case 'data-map-state': {
const locationPoint = JSON.parse(this.getAttribute('data-location'));
const coord = [locationPoint.location.x, locationPoint.location.y];
this.map.addControl(new maplibregl.NavigationControl());
this.map.on('style.load', () => {
this.map.resize();
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line no-unused-vars
const marker = new maplibregl.Marker()
.setLngLat(coord)
.addTo(this.map);
this.map.flyTo({
// These options control the ending camera position: centered at
// the target, at zoom level 9, and north up.
center: coord,
zoom: 12,
bearing: 0,

// These options control the flight curve, making it move
// slowly and zoom out almost completely before starting
// to pan.
speed: 1.5, // make the flying slow
curve: 1, // change the speed at which it zooms out

// This can be any easing function: it takes a number between
// 0 and 1 and returns another number between 0 and 1.
easing: function (t) {
return t;
},

// this animation is considered essential with respect to prefers-reduced-motion
essential: true,
});
const app = document.getElementsByTagName('my-home-info');
const apiData = JSON.parse(
app[0].getAttribute('data-api-active-datasets'),
);
const mapData = app[0].getAttribute('data-map-active-data');
this.map.addSource('data-points', {
type: 'geojson',
data: apiData[mapData].data,
});
this.map.addLayer({
id: 'data-points',
type: 'circle',
source: 'data-points',
paint: {
'circle-radius': {
base: 5,
stops: [
[12, 5],
[22, 120],
],

if (locationPoint) {
const marker = new maplibregl.Marker();
marker.setLngLat(coord);
marker.addTo(this.map);
this.map.flyTo({
// These options control the ending camera position: centered at
// the target, at zoom level 9, and north up.
center: coord,
zoom: 12,
bearing: 0,

// These options control the flight curve, making it move
// slowly and zoom out almost completely before starting
// to pan.
speed: 1.5, // make the flying slow
curve: 1, // change the speed at which it zooms out

// This can be any easing function: it takes a number between
// 0 and 1 and returns another number between 0 and 1.
easing: function (t) {
return t;
},

// this animation is considered essential with respect to prefers-reduced-motion
essential: true,
});
}

const mapData = JSON.parse(this.getAttribute('data-map-data'));
if (mapData) {
this.map.addSource('data-points', {
type: 'geojson',
data: mapData.data,
});
this.map.addLayer({
id: 'data-points',
type: 'circle',
source: 'data-points',
paint: {
'circle-radius': {
base: 5,
stops: [
[12, 5],
[22, 120],
],
},
'circle-color': '#004544',
},
'circle-color': '#004544',
},
});
});
}
});
// Creating this temp variable for workaround with dealing with "this" encapsulation
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line no-case-declarations
const tempMap = this;
this.map.on('click', 'data-points', function (e) {
const app = document.getElementsByTagName('my-home-info');
const mapData = app[0].getAttribute('data-map-active-data');
tempMap.buildPointData(mapData, e.features[0], tempMap, e);
const activeData = tempMap.getAttribute('data-map-active-data');
tempMap.buildPopup(activeData, e.features[0], tempMap, e);
});
this.map.on('mouseenter', 'data-points', function () {
tempMap.map.getCanvas().style.cursor = 'pointer';
Expand All @@ -138,13 +119,51 @@ export default class Map extends HTMLElement {
tempMap.map.getCanvas().style.cursor = '';
});
break;
}

case 'data-map-mode': {
// Get map mode
const mapMode = this.getAttribute('data-map-mode');
switch (mapMode) {
case 'my-home-info': {
const parentComponentName = this.getAttribute(
'data-parent-component',
);
const app = document.getElementsByTagName(parentComponentName);
const closeMapBtn = document.createElement('cod-button');
closeMapBtn.addEventListener('click', () => {
app[0] ? app[0].setAttribute('data-app-state', 'results') : 0;
});
closeMapBtn.setAttribute('data-primary', true);
closeMapBtn.setAttribute('data-label', 'x');
closeMapBtn.setAttribute('data-size', 'large');
closeMapBtn.setAttribute('data-hover', false);
closeMapBtn.setAttribute('data-background-color', 'warning');
closeMapBtn.setAttribute('data-img', '');
closeMapBtn.setAttribute('data-img-alt', '');
closeMapBtn.setAttribute('data-icon', '');
closeMapBtn.setAttribute('data-shape', 'square');
this.mapWrapper.appendChild(closeMapBtn);
app[0] ? app[0].setAttribute('data-map-state', 'init') : 0;
break;
}

case 'single-location': {
break;
}

default:
break;
}
break;
}

default:
break;
}
}

buildPointData(dataType, data, map, e) {
buildPopup(dataType, data, map, e) {
switch (dataType) {
case 'schools':
new maplibregl.Popup()
Expand Down
2 changes: 1 addition & 1 deletion src/components/organisms/Map/cod-map.js
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
import Map from './Map';
customElements.define('app-map', Map);
customElements.define('cod-map', Map);
1 change: 1 addition & 0 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import './components/organisms/Card/cod-card';
import './components/organisms/Carousel/cod-carousel';
import './components/organisms/Form/cod-form';
import './components/organisms/Modal/cod-modal';
import './components/organisms/Map/cod-map';
import './components/organisms/Navbar/cod-navbar';
import './components/organisms/Offcanvas/cod-offcanvas';
import './components/organisms/Table/cod-table';
Expand Down
24 changes: 24 additions & 0 deletions src/stories/map.stories.js
View file

Large diffs are not rendered by default.

0 comments on commit da4f2ce

Please sign in to comment.