{{p.properties.name}}
@@ -44,29 +64,107 @@ export default {
url: 'map/{z}/{x}/{y}.png',
zoom: 3,
noWrap: true,
- center: [0,0],
worldCopyJump: false,
crs: ownCRS,
tms: true,
attribution: process.env.VUE_APP_TITLE,
features: [],
- iconPlayer: new L.Icon({
- iconUrl: require('@/assets/marker-player.png'),
- iconSize: [25, 41],
- iconAnchor: [12, 41],
+ iconPlayer: L.divIcon({
+ html: '
',
popupAnchor: [1, -34],
+ iconSize: L.point(0, 0)
}),
+ iconBlue: L.divIcon({
+ html: '
',
+ popupAnchor: [1, -34],
+ iconSize: L.point(0, 0)
+ }),
+ iconRed: L.divIcon({
+ html: '
',
+ popupAnchor: [1, -34],
+ iconSize: L.point(0, 0)
+ }),
+ iconYellow: L.divIcon({
+ html: '
',
+ popupAnchor: [1, -34],
+ iconSize: L.point(0, 0)
+ }),
+ iconGreen: L.divIcon({
+ html: '
',
+ popupAnchor: [1, -34],
+ iconSize: L.point(0, 0)
+ }),
+ buildingClusterOptions: {
+ maxClusterRadius: 50,
+ iconCreateFunction: (cluster) => {
+ return L.divIcon({ html: '' +
+ cluster.getChildCount() +
+ '
',
+ iconSize: L.point(0, 0) });
+ },
+ },
+ travelnetClusterOptions: {
+ maxClusterRadius: 50,
+ iconCreateFunction: (cluster) => {
+ return L.divIcon({ html: '' +
+ cluster.getChildCount() +
+ '
',
+ iconSize: L.point(0, 0) });
+ },
+ },
+ poiClusterOptions: {
+ maxClusterRadius: 50,
+ iconCreateFunction: (cluster) => {
+ return L.divIcon({ html: '' +
+ cluster.getChildCount() +
+ '
',
+ iconSize: L.point(0, 0) });
+ },
+ },
+ otherClusterOptions: {
+ maxClusterRadius: 50,
+ iconCreateFunction: (cluster) => {
+ return L.divIcon({ html: '' +
+ cluster.getChildCount() +
+ '
',
+ iconSize: L.point(0, 0) });
+ },
+ }
}
},
computed: {
+ buildingFeatures() {
+ return this.$store.state.pointFeatures.filter(f => f.type === 'Building');
+ },
+ travelnetFeatures() {
+ return this.$store.state.pointFeatures.filter(f => f.type === 'Travelnet')
+ },
+ poiFeatures() {
+ return this.$store.state.pointFeatures.filter(f => f.type === 'Point of Interest')
+ },
+ otherFeatures() {
+ return this.$store.state.pointFeatures.filter(f => f.type === 'Other')
+ },
players() {
+ console.log(this.$store.state.players);
return this.$store.state.players;
},
...mapState({
+ mapCenter: state => state.mapCenter,
+ features: state => state.pointFeatures,
autoUpdate: state => state.autoUpdate,
playersLayer: state => state.playersLayer,
+ buildingsLayer: state => state.buildingsLayer,
+ poiLayer: state => state.poiLayer,
+ travelnetLayer: state => state.travelnetLayer,
+ otherLayer: state => state.otherLayer,
}),
},
+ mounted() {
+ this.$nextTick(function () {
+ console.log(this.$refs.baseLayer);
+ })
+ },
methods: {
update(evt) {
this.$store.commit('updateCoordinates', [evt.latlng.lat, evt.latlng.lng])
@@ -83,4 +181,89 @@ export default {
color: #f5f5f5;
background-color: #424242;
}
+.iconFontPlayer {
+ font-size: medium;
+ width: 17px;
+ height: 17px;
+ color: rgb(58, 58, 58);
+ position: absolute;
+ top: -41px;
+ left: -9px;
+ font-weight: bold;
+ text-align: center;
+ border: 0px solid #666;
+}
+.iconFont {
+ width: 17px;
+ height: 17px;
+ color: rgb(58, 58, 58);
+ position: absolute;
+ top: -38px;
+ left: -9px;
+ font-weight: bold;
+ text-align: center;
+ border: 0px solid #666;
+}
+.myMarkerCluster {
+ border-radius: 49%;
+ width: 18px;
+ height: 18px;
+ background-color: #616160;
+ color: white;
+ position: absolute;
+ top: -38px;
+ left: -10px;
+ font-weight: bold;
+ text-align: center;
+}
+.divIconBlue {
+ width: 24px;
+ height: 40px;
+ position: absolute;
+ top: -42px;
+ left: -13px;
+ line-height: 40px;
+ background-image: url("@/assets/marker-icon-blue.png");
+ text-align: center;
+}
+.divIconYellow {
+ width: 24px;
+ height: 40px;
+ position: absolute;
+ top: -42px;
+ left: -13px;
+ line-height: 40px;
+ background-image: url("@/assets/marker-icon-yellow.png");
+ text-align: center;
+}
+.divIconRed {
+ width: 24px;
+ height: 40px;
+ position: absolute;
+ top: -42px;
+ left: -13px;
+ line-height: 40px;
+ background-image: url("@/assets/marker-icon-red.png");
+ text-align: center;
+}
+.divIconGreen {
+ width: 24px;
+ height: 40px;
+ position: absolute;
+ top: -42px;
+ left: -13px;
+ line-height: 40px;
+ background-image: url("@/assets/marker-icon-green.png");
+ text-align: center;
+}
+.divIconOrange {
+ width: 24px;
+ height: 40px;
+ position: absolute;
+ top: -42px;
+ left: -13px;
+ line-height: 40px;
+ background-image: url("@/assets/marker-icon-orange.png");
+ text-align: center;
+}
diff --git a/cmd/mtwebmapper/client/src/store/index.js b/cmd/mtwebmapper/client/src/store/index.js
index b89e452..6bea068 100644
--- a/cmd/mtwebmapper/client/src/store/index.js
+++ b/cmd/mtwebmapper/client/src/store/index.js
@@ -13,7 +13,9 @@ export default new Vuex.Store({
poiLayer: true,
travelnetLayer: true,
otherLayer: true,
- players: []
+ players: [],
+ mapCenter: [0, 0],
+ pointFeatures: [],
},
mutations: {
@@ -44,6 +46,12 @@ export default new Vuex.Store({
setPlayerState(state, value) {
const p = state.players.find(p => p.name === value.name)
p.online = value.state;
+ },
+ setMapCenter(state, value) {
+ state.mapCenter = value;
+ },
+ setPointFeatures(state, value) {
+ state.pointFeatures = value;
}
},
@@ -73,6 +81,9 @@ export default new Vuex.Store({
fetch("players").then(response => response.json().then((data) => {
commit("setPlayers", data);
}));
+ fetch("poi").then(response => response.json().then((data) => {
+ commit("setPointFeatures", data);
+ }));
},
runAutoUpdate: function({ commit, state, dispatch}) {
@@ -121,6 +132,20 @@ export default new Vuex.Store({
commit('setPlayers', msg.players);
}
+ if (msg.poi) {
+ console.log(msg.poi)
+ let points = [];
+ for (let i = 0; i < msg.poi.length; i++) {
+ points.push({
+ id: i,
+ pos: [msg.poi[i].pos.x, msg.poi[i].pos.z],
+ text: msg.poi[i].text,
+ type: msg.poi[i].type,
+ });
+ }
+ commit("setPointFeatures", points);
+ }
+
var tilesData = msg.tiles;
if (!tilesData) {
return;