MapBox geojson data not displaying with certain "Styles" - mapbox
I can get my data from a geojson file in my site's directory to display my data on default Mapbox style (v9 dark etc...) But for some reason it just shows no data on my custom styled maps (only certain ones)...
Confused.
I have the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Major Civil War Battles</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
font-family: 'Helvetica Neue', Helvetica, Arial, Sans-serif;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
h1 {
font-size: 20px;
line-height: 30px;
}
h2 {
font-size: 14px;
line-height: 20px;
margin-bottom: 10px;
}
a {
text-decoration: none;
color: #2dc4b2;
}
#console {
position: absolute;
width: 240px;
margin: 10px;
padding: 10px 20px;
background-color: white;
}
</style>
</head>
<body>
<div id='map'></div>
<div id='console'>
<h1>Major Battles of The Civil War (1861-1865)</h1>
<p></p>
<div class='session' id='sliderbar'>
<h2>Year: <label id='active-year'>1861</label></h2>
<input id='slider' class='row' type='range' min='1861' max='1865' step='1' value='1861' />
</div>
</div>
</body>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiY2dyb3RoIiwiYSI6ImNqZzlramN2Mzh0c3Uyd252cWxzYnF3c2UifQ.5lpaHuwMqJ5EsTARqW5kHg';
var map = new mapboxgl.Map({
container: 'map', // container element id
//mapbox://styles/mapbox/light-v9
//mapbox://styles/cgroth/cjgl5x6c400002qnkl94ab1yc
style: 'mapbox://styles/cgroth/cjgl5x6c400002qnkl94ab1yc',
center: [-77.04, 38.907],
zoom: 5
});
map.on('load', function() {
map.addLayer({
id: 'battledata',
type: 'circle',
source: {
type: 'geojson',
data: './CWGG.geojson' // replace this with the url of your own geojson
},
paint: {
'circle-radius': [
'interpolate',
['linear'],
['number', ['get', 'TotalCasualties']],
1, 2,
51000, 40
],
'circle-color':'#AA5E79',
'circle-opacity': 0.8
}
}, 'admin-2-boundaries-dispute');
document.getElementById('slider').addEventListener('input', function(e) {
var year = parseInt(e.target.value);
// update the map
map.setFilter('battledata', ['==', ['number', ['get', 'Year']], year]);
// update text in the UI
document.getElementById('active-year').innerText = year
});
});
</script>
If I run the exact same code with a default Mapbox "Style" my data displays perfectly. I insert my style code and nothing appears.
Here are the console errors when I try to run the HTML:
rror: Layer with id "admin-2-boundaries-dispute" does not exist on this map.
at r.addLayer (style.js:542)
at e.addLayer (map.js:1125)
at e.<anonymous> (AA_WorkingCW.html:85)
at e.Evented.fire (evented.js:93)
at r.Evented.fire (evented.js:103)
at r._load (style.js:226)
at style.js:164
at XMLHttpRequest.r.onload (ajax.js:76)
Evented.fire # evented.js:109
favicon.ico Failed to load resource: the server responded with a status of 404 (Not Found)
a.tiles.mapbox.com/v4/mapbox.terrain-rgb/6/19/25.webp?access_token=pk.eyJ1IjoiY2dyb3RoIiwiYSI6ImNqZ2w4bWY5dTFueG0zM2w0dTNkazI1aWEifQ.55SWFVBYzs08EqJHAa3AsQ Failed to load resource: the server responded with a status of 404 (Not Found)
a.tiles.mapbox.com/v4/mapbox.terrain-rgb/6/20/24.webp?access_token=pk.eyJ1IjoiY2dyb3RoIiwiYSI6ImNqZ2w4bWY5dTFueG0zM2w0dTNkazI1aWEifQ.55SWFVBYzs08EqJHAa3AsQ Failed to load resource: the server responded with a status of 404 (Not Found)
b.tiles.mapbox.com/v4/mapbox.terrain-rgb/6/19/26.webp?access_token=pk.eyJ1IjoiY2dyb3RoIiwiYSI6ImNqZ2w4bWY5dTFueG0zM2w0dTNkazI1aWEifQ.55SWFVBYzs08EqJHAa3AsQ Failed to load resource: the server responded with a status of 404 (Not Found)
a.tiles.mapbox.com/v4/mapbox.terrain-rgb/6/20/26.webp?access_token=pk.eyJ1IjoiY2dyb3RoIiwiYSI6ImNqZ2w4bWY5dTFueG0zM2w0dTNkazI1aWEifQ.55SWFVBYzs08EqJHAa3AsQ Failed to load resource: the server responded with a status of 404 (Not Found)
5evented.js:109 Error: The layer 'battledata' does not exist in the map's style and cannot be filtered.
at r.setFilter (style.js:681)
at e.setFilter (map.js:1185)
at HTMLInputElement.<anonymous> (AA_WorkingCW.html:107)
Evented.fire # evented.js:109
ajax.js:106 GET https://a.tiles.mapbox.com/v4/mapbox.terrain-rgb/6/20/24.webp?access_token=pk.eyJ1IjoiY2dyb3RoIiwiYSI6ImNqZ2w4bWY5dTFueG0zM2w0dTNkazI1aWEifQ.55SWFVBYzs08EqJHAa3AsQ 404 (Not Found)
exports.getArrayBuffer # ajax.js:106
exports.getImage # ajax.js:121
r.loadTile # raster_dem_tile_source.js:37
t._loadTile # source_cache.js:144
t._addTile # source_cache.js:584
t._updateRetainedTiles # source_cache.js:489
t.update # source_cache.js:435
r._updateSources # style.js:943
e._render # map.js:1499
(anonymous) # map.js:1567
requestAnimationFrame (async)
frame # browser.js:30
e._rerender # map.js:1565
e._update # map.js:1450
Evented.fire # evented.js:93
e.resize # map.js:408
e._onWindowResize # map.js:1578
ajax.js:106 GET https://a.tiles.mapbox.com/v4/mapbox.terrain-rgb/6/20/26.webp?access_token=pk.eyJ1IjoiY2dyb3RoIiwiYSI6ImNqZ2w4bWY5dTFueG0zM2w0dTNkazI1aWEifQ.55SWFVBYzs08EqJHAa3AsQ 404 (Not Found)
exports.getArrayBuffer # ajax.js:106
exports.getImage # ajax.js:121
r.loadTile # raster_dem_tile_source.js:37
t._loadTile # source_cache.js:144
t._addTile # source_cache.js:584
t._updateRetainedTiles # source_cache.js:489
t.update # source_cache.js:435
r._updateSources # style.js:943
e._render # map.js:1499
(anonymous) # map.js:1567
requestAnimationFrame (async)
frame # browser.js:30
e._rerender # map.js:1565
e._update # map.js:1450
Evented.fire # evented.js:93
e.resize # map.js:408
e._onWindowResize # map.js:1578
ajax.js:106 GET https://b.tiles.mapbox.com/v4/mapbox.terrain-rgb/6/21/26.webp?access_token=pk.eyJ1IjoiY2dyb3RoIiwiYSI6ImNqZ2w4bWY5dTFueG0zM2w0dTNkazI1aWEifQ.55SWFVBYzs08EqJHAa3AsQ 404 (Not Found)
exports.getArrayBuffer # ajax.js:106
exports.getImage # ajax.js:121
r.loadTile # raster_dem_tile_source.js:37
t._loadTile # source_cache.js:144
t._addTile # source_cache.js:584
t._updateRetainedTiles # source_cache.js:489
t.update # source_cache.js:435
r._updateSources # style.js:943
e._render # map.js:1499
(anonymous) # map.js:1567
requestAnimationFrame (async)
frame # browser.js:30
e._rerender # map.js:1565
e._update # map.js:1450
Evented.fire # evented.js:93
e.resize # map.js:408
e._onWindowResize # map.js:1578
ajax.js:106 GET https://a.tiles.mapbox.com/v4/mapbox.terrain-rgb/6/21/25.webp?access_token=pk.eyJ1IjoiY2dyb3RoIiwiYSI6ImNqZ2w4bWY5dTFueG0zM2w0dTNkazI1aWEifQ.55SWFVBYzs08EqJHAa3AsQ 404 (Not Found)
exports.getArrayBuffer # ajax.js:106
exports.getImage # ajax.js:121
r.loadTile # raster_dem_tile_source.js:37
t._loadTile # source_cache.js:144
t._addTile # source_cache.js:584
t._updateRetainedTiles # source_cache.js:489
t.update # source_cache.js:435
r._updateSources # style.js:943
e._render # map.js:1499
(anonymous) # map.js:1567
requestAnimationFrame (async)
frame # browser.js:30
e._rerender # map.js:1565
e._update # map.js:1450
Evented.fire # evented.js:93
e.resize # map.js:408
e._onWindowResize # map.js:1578
ajax.js:106 GET https://b.tiles.mapbox.com/v4/mapbox.terrain-rgb/6/21/24.webp?access_token=pk.eyJ1IjoiY2dyb3RoIiwiYSI6ImNqZ2w4bWY5dTFueG0zM2w0dTNkazI1aWEifQ.55SWFVBYzs08EqJHAa3AsQ 404 (Not Found)
Layer with id "admin-2-boundaries-dispute" does not exist on this map.
This error is telling you that you're trying to insert your new layer before a layer which doesn't exist. Presumably it exists in the dark layer, but not in your custom layer. Mapbox-GL-JS recently changed so that inserting a layer before a non-existent layer fails completely - it does not get added.
Related
Change size of the icon in ObjectListItem
i'm setting up a list by getting items from the OData service and when i want to display them using the ObjectListItem i found no way to increase the size of image and i've tried to use css like that but i didn't work
.sapMImg {
font-size: 400px ; /*!important;*/
}
<ObjectListItem
type="Navigation"
press=".onSelectionChange"
icon="/H31{MimeType}"
title="{MatlDesc}"
number="{PriceUnit}"
numberUnit="{BaseUom}"
numberState="{= 11 > 10 ? 'Success' : 'Error' }"
class="sapMImg"
/>
Add this to a css file you are already using:
.sapUiIcon {
font-size: 1.5rem !important;
}
To use an external css file, you can load them using this config on the manifest:
"resources": {
"css": [
{
"uri": "content/css/style.css"
},
MapBox markers Move on zooming
I'm working on MapBoxgl and I want to add several markers.
Here is my index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link href=" /assets/css/bootstrap.min.css " rel="stylesheet" />
<link href=" /assets/css/mapbox-gl.css " rel="stylesheet" />
<link href=" /assets/css/main.css " rel="stylesheet" />
</head>
<body>
<div id="map"></div>
<script src="/assets/js/mapbox-gl.js"></script>
<script src="/assets/js/map-style.js"></script>
</body>
</html>
This is map-style.js:
var map = new mapboxgl.Map({
container: 'map',
center: [57.3221, 33.5928],
zoom: 5,
style: style
});
var geojson = {
type: 'FeatureCollection',
features: [{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [30.61, 46.28]
},
properties: {
title: 'point 1',
description: 'point 1 Description',
message: 'point1',
iconSize: [25, 25]
}
},
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [30.62, 46.2845]
},
properties: {
title: 'point 2',
description: 'point 2 Description',
message: 'point 2',
iconSize: [25, 25]
}
}]
};
map.on('load', function () {
// add markers to map
geojson.features.forEach(function(marker) {
// create a DOM element for the marker
var el = document.createElement('div');
el.className = 'markers';
el.style.backgroundImage = 'url(assets/marker-azure.png)';
//el.style.width = marker.properties.iconSize[0] + 'px';
el.style.height = marker.properties.iconSize[1] + 'px';
el.addEventListener('click', function() {
window.alert(marker.properties.message);
});
// add marker to map
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.addTo(map);
});
});
And following is main.css portion related to map and marker:
#map { position:absolute; top:0; bottom:0; width:100% }
.markers {
display: absolute;
border: none;
border-radius: 50%;
cursor: pointer;
padding: 0;
}
So, my problem is that when I add width property to markers, their icon be displayed correctly (with a bit stretch) but they are in wrong coordinate and move on zoom, like picture below:
On the other hand, if width property is eliminated, they are in right place and does not move on zooming, but they are very stretched and in fact as wide as screen (following image):
It's noteworthy that I've used bootstrap. Can it be the reason of this? If not, what's the problem?
Thanks
import 'mapbox-gl/dist/mapbox-gl.css'; Adding import css works for me.
I found the solution and share it here with others who will encounter this problem. The problem caused because of using a not-most-recent version of the library. After upgrading to the latest release, I could get rid of that problem. Note that these kinds of problems sometimes occur, when you use npm. Make sure that the library is downloaded completely and It's the latest release. Latest releases of MapBox can be found at here.
had similar issue, the marker seemed to change position on zoom in/out, fixed it by setting offset, thought to share if it can help others, here is the fiddle
// add marker to map
var m = new mapboxgl.Marker(el, {offset: [0, -50/2]});
m.setLngLat(coordinates);
m.addTo(map);
(Using mapbox 1.13.0)
I had a similar issue where the popups weren't displaying and would change position based on zoom.
Mapbox officially states that you need to include the css file to have markers and popups work as expected.
https://docs.mapbox.com/mapbox-gl-js/guides/install/
HOWEVER, you can also copy that css directly into a component and use that as an element. For example:
export default function MarkerMapTest(props) {
const mapContainer = React.useRef(null)
const map = React.useRef(null)
const elemRef = React.useRef(null)
React.useEffect(() => {
map.current = new mapboxgl.Map({
container: mapContainer.current,
style: "mapbox://styles/mapbox/dark-v10",
center: [151.242, -33.9132],
zoom: 14,
})
const marker = new mapboxgl.Marker({
element: elemRef.current,
})
.setLngLat([151.242, -33.9132])
.addTo(map.current)
}, [])
return (
<div
style={{ width: 600, height: 600, backgroundColor: "gray" }}
ref={mapContainer}
>
<div
style={{
width: 30,
height: 30,
borderRadius: 15,
backgroundColor: "red",
position: "absolute", // !
top: 0, // !
left: 0, // !
}}
ref={elemRef}
/>
</div>
In my case the svg I used had some space around the real content. That way it seemed for me that the marker was moving. A simple fix was to remove the space around the content (e.g. with the "Resize page to drawing or selection" option of inkscape: https://graphicdesign.stackexchange.com/a/21638) Also it is important to set display: block on the svg-marker. See: https://stackoverflow.com/a/39716426/11603006
INSERT INTO using Postgres on PYTHON DB-API
I'm trying to learn to add backend to a simple web app using postgreSQL and Python DB-API.
When running the app, why do I get an error if the function get_posts() in forumdb. python uses c. execute ("SELECT * FROM posts ORDER BY time;) instead of SELECT content, time FROM posts ORDER BY time;)?
Secondly, can anyone explain why c.execute("INSERT INTO posts VALUES (content)") doesn't work and we have to use the ('%s') % content thing in the function add_post(content) in forumdb.py?
Below is forum.py
from flask import Flask, request, redirect, url_for
# Using a module called forumdb
from forumdb import get_posts, add_post
app = Flask(__name__)
# HTML template for the forum page
HTML_WRAP = '''\
<!DOCTYPE html>
<html>
<head>
<title>DB Forum</title>
<style>
h1, form { text-align: center; }
textarea { width: 400px; height: 100px; }
div.post { border: 1px solid #999;
padding: 10px 10px;
margin: 10px 20%%; }
hr.postbound { width: 50%%; }
em.date { color: #999 }
</style>
</head>
<body>
<h1>DB Forum</h1>
<form method=post>
<div><textarea id="content" name="content"></textarea></div>
<div><button id="go" type="submit">Post message</button></div>
</form>
<!-- post content will go here -->
%s
</body>
</html>
'''
# HTML template for an individual comment
POST = '''\
<div class=post><em class=date>%s</em><br>%s</div>
'''
#app.route('/', methods=['GET'])
def main():
'''Main page of the forum.'''
posts = "".join(POST % (date, text) for text, date in get_posts())
html = HTML_WRAP % posts
return html
#app.route('/', methods=['POST'])
def post():
'''New post submission.'''
message = request.form['content']
add_post(message)
return redirect(url_for('main'))
if __name__ == '__main__':
app.run(host='0.0.0.0', port=8000)
Below is forumdb.py
# "Database code" for the DB Forum.
import psycopg2
import datetime
def get_posts():
con = psycopg2.connect(dbname="forum")
c = con.cursor()
"""Return all posts from the 'database', most recent first."""
c.execute("SELECT content, time FROM posts ORDER BY time;")
return c.fetchall()
con.close()
def add_post(content):
con = psycopg2.connect(dbname="forum")
c = con.cursor()
"""Add a post to the 'database' with the current timestamp."""
c.execute("INSERT INTO posts VALUES ('%s')" % content)
con.commit()
con.close()
Thank you!
Because you are using parameterized query is a query in which placeholders are used for parameters and the parameter values are supplied at execution time. When we want to use a variable inside a SQL query you need to use a placeholder for it. Example query = """Update table set column_a = %s where column_b = %s"""
Polymer 1.0 Is there any ready made chart element?
I want to add a pie chart in my Polymer 1.0 application. I used chart-elements with Polymer 0.5, but when migrated to 1.0 it stopped working!
I did not find anything for 1.0 yet. Does 1.0 at all has a ready made chart element? Seeking for expert help.
Thanks in advance.
EDIT
According to Ben's suggestion I tried with google-chart component and this is what I did. But the chart is not rendering.
Step 1: I installed google-chart by using bower install --save GoogleWebComponents/google-chart
Step 2: Created a custom element using yo polymer:el custom-pie-chart which looks like this:
<dom-module id="custom-pie-chart">
<style>
:host
{
display: -webkit-flex;
display: -ms-flex;
display: flex;
margin: 0;
padding: 0;
width: 400px;
height: 300px;
}
#chartdiv
{
width: 100%;
}
google-chart
{
height: 300px;
width: 50em;
}
</style>
<template>
<link rel="stylesheet" href="custom-pie-chart.css">
<div id="chartdiv">
<google-chart
type='pie'
options='{"title": "Distribution of days in 2001Q1"}'
cols='[{"label":"Month", "type":"string"}, {"label":"Days", "type":"number"}]'
rows='[["Jan", 31],["Feb", 28],["Mar", 31]]'>
</google-chart>
</div>
</template>
</dom-module>
<script>
(function () {
Polymer({
is: 'custom-pie-chart',
ready: function () {
}
});
})();
</script>
Step 3: Added references of google-chart and my custom element custom-pie-chart in elements.html
Step 4: Added custom-pie-chart in my index.html as follows:
<post-card id="sales-info" title="Points from customer">
<custom-pie-chart></custom-pie-chart>
</post-card>
But chart is not rendering. Area comes blank like this:
NB: I am also getting the following error on console (Chrome)
Uncaught (in promise) TypeError: Request method 'POST' is unsupported
at TypeError (native)
at http://localhost:3000/bower_components/sw-toolbox/sw-toolbox.js:20:430
I removed all references of google-chart to check whether this is responsible. But it still comes up.
What wrong I am doing? Please help!
This causes the error: rows='[["Jan", 31],["Feb", 28],["Mar", 31]]' because Polymer only recognizes rows='[[...]]' and thinks it is a data binding. Two spaces should solve the problem: rows='[ ["Jan", 31],["Feb", 28],["Mar", 31] ]'
Is it possible to create a 'view all' page in Tumblr?
I've tried creating pages using the 'standard layout' and 'custom layout' but neither allows the use of the {block:Posts} variable(s). I need to re-create essentially the archive page but with some custom css. Is there any way to accomplish this?
If I try $("#someDiv").load("/archive", "#content"); the whole page formatting gets screwed up. Is there a way to load just the <a> tags into a div on my custom page?
Or would it be possible to use the API entirely client side to accomplish this?
Any ideas on this would be appreciated.
I came up with two possible solutions if anyone else finds themselves stuck on this. I abandoned this first one before finalizing it, so it's a bit rough but a good start. It uses the API to load photos (that was all I needed) as you scroll down the page.
<script>
function getPhotos(offset){
$.ajax({
url: "http://api.tumblr.com/v2/blog/[tumblr].tumblr.com/posts?api_key=[key]&offset="+offset,
dataType: 'jsonp',
success: function(results){
loaded += 20;
total = results.response.blog.posts;
if(total > loaded){
results.response.posts.forEach(function(post){
post.photos.forEach(function(photo){
$("#photos ul").append("<li class='"+post.tags.join(" ")+"'><img src='"+photo.alt_sizes[0].url+"'></li>");
$("#photos").imagesLoaded(function(){
$("#photos").masonry({
itemSelector: 'li'
});
});
});
});
if($("#photos ul").height() < $(window).height()){
getPhotos(loaded);
}
}
}
});
}
loaded = 0;
getPhotos(loaded);
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
getPhotos(loaded);
}
});
</script>
What I've ended up doing is just using an iframe with a custom stylesheet appended to the head.
html:
<head>
<script src="http://[remote location]/frame.js"></script>
</head>
<body>
<div id="photos">
<iframe name="frame1" id="frame1" src="http://[tumblr]/archive" frameBorder="0"></iframe>
</div>
</body>
frame.js:
$(function(){
function insertCSS(){
var frm = frames['frame1'].document;
var otherhead = frm.getElementsByTagName("head")[0];
if(otherhead.length != 0){
var link = frm.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", "http://[remote location]/frame.css");
otherhead.appendChild(link);
setTimeout(function(){$("#frame1").show();}, 200);
clearInterval(cssInsertion);
}
}
cssInsertion = setInterval(insertCSS, 500);
//setTimeout(insertCSS, 1000);
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100 && $("#frame1").height() < 50000) {
$("#frame1").css("height", "+=1000px");
}
});
});
frame.css (stylesheet appended into iframe)
body{
overflow: hidden;
}
#nav_archive{
display: none;
}
.heading{
display: block !important;
}
.old_archive #content{
margin: 0 auto 0;
}
style.css (stylesheet on page where iframe is located)
#frame1{
border: none;
width: 100%;
height: 3000px;
overflow: hidden;
display: none;
}