I'm trying to draw a SVG map with two layers using Kartograph.py.
The end result should be a single country on the first layer (say France) with the main rivers on a second layer.
The first layer with France borders works perfectly, but then I would like to add additional topological information on top of the map (say rivers). I have found the shapefile describing the rivers. However, when I add it in the JSON configuration file as shown below, the rivers are out of the country (but inside the square defined by the country, see image).
The documention of Kartograph mentions crop-to, but I cannot get it to work. When I add this option to crop the second layer to the first one, all the river data does not appear.
{
"proj": {
"id": "laea"
},
"layers": [
{
"id": "layer0",
"src": "FRA_adm2.shp",
"simplify": 2
},
{
"id": "rivers",
"src": "rivers.shp",
"crop-to": "layer0", /* This is not working */
"simplify": 0
}
]
}
Related
I am setting up GeoServer v2.20 to use .mbtiles osm(OpenStreetMap) vector tiles map file with the map box styles (style.json). Able to enable the MBTiles Store and MBStyle options by adding the corresponding extension for MBTiles & MBStyle in GeoServer.
The map is getting rendered via openLayers and the url for the map will look like as below:
http://localhost:8080/geoserver/mydomain/wms?service=WMS&version=1.1.0&request=GetMap&layers=layer_group_name&bbox=2117772.049113751%2C8242859.778951772%2C3517794.983414251%2C1.1101207517961873E7&width=376&height=768&srs=EPSG%3A3857&styles=&format=image%2Fpng
The map is getting rendered, however the following issues are occurring in the configuration and display as :
When saving the MB style (In GeoServer -> adding new Style), not able to save the details for 'background' layer type, am getting the error "Layer background:This layer is not meant to be transformed, but converted in a Style background fill". Hence I need to remove this section, in order to save the style.
"layers": [
{
"id": "background",
"minzoom": 0,
"paint": {
"background-color": "rgba(239, 239, 228, 1)"
},
"type": "background"
}
May be because of this, in the Map view a lot of white color area is appearing for the map background with minimal zoom. But with maximum zoom level (17), am able to view most of the map information correctly.
There are lots of small red color square boxes are shown (as points) in the map. I guess its not able to get the correct styles/images for this points. In the MBStyle the 'sprite' attribute is specified as:
"name": "My custom map style",
"pitch": 0,
"sources": {
"openmaptiles": {
"type": "vector",
"url": "#maptiler-osm"
}
},
"sprite": "#",
"version": 8,
"zoom": 8.759936762170502
Is there a way to point to the local directory for the sprite files (.json & .png) ?
The same .mbtiles map file and the MB style are working fine with the MapTiler server, but not with the GeoServer as mentioned above.
Would be great if any configuration steps are available / or any directions to make this work.
We are facing one issue with Kendo UI grid. (We are evaluating it, so no license copy as of now)
Scenario is:
We need to show data in Grid component.
For each column, we will have filter in form of multi select list box (see image attached).
We tried Kendo UI trial copy, and were successful to set data in it.
When we tried setting items in filter box, they appear to be blank.
Following is JSON which provides list of items in filter:
data which should be displayed in that dropdown list
[
{
"id": 67,
"name": "Investigation ESP"
},
{
"id": 88,
"name": "Refuse & Pickups"
},
{
"id": 101,
"name": "Dead Bug Removal"
}
]
Can you share proper example or point our mistake.
please try to combine the following two things...
http://demos.telerik.com/kendo-ui/grid/filter-menu-customization
http://www.telerik.com/forums/multi-select-with-checkboxes-plugin
My implementation has two lists of elements and you basically connect items from the list on the left to items from the list on the right.
We have set the endpoints to be transparent so on the desktop it looks like you just drag from elements on one side to the other.
It works brilliantly on desktop but on touch devices we need the endpoint to cover exactly the space of the element it is attached to in order for it to work as the user would expect. So in effect the whole element becomes an endpoint.
I can achieve this by making the endpoint a rectangle of the same size and anchoring in the center, but I want to anchor on the right/left. If I anchor in the right/left, then my large endpoint is then half covering the element.
Is there a way of anchoring on the right/left but have the endpoint covering the element entirely? Or offsetting the endpoint somehow so it still covers the element?
Thanks in advance for any help
Btw jsPlumb is awesome
You can do it using a transparent image. I did it that way.
endpoint:[ "Image", { src:"/javascript/project/img/c.png",
cssClass:'node' } ]
If you use jsPlumb.addEndpoint() you can add additional parameters for each endpoint you create.
I got this code from one of the examples:
var exampleGreyEndpointOptions = {
endpoint:"Rectangle",
paintStyle:{ width:25, height:21, fillStyle: color }, // size and color of the endpoint
isSource:true,
connectorStyle : { strokeStyle: color }, // color of the line AND the arrow
isTarget:false,
maxConnections:20,
anchor: "BottomCenter"
};
var endpointOptions = {
isTarget:true,
endpoint:"Dot",
paintStyle:{
fillStyle: color // color of the end point
},
beforeDrop: function(info){
return handleConnectionDrop(info);
},
dropOptions: exampleDropOptions,
maxConnections: 20,
anchor: "TopCenter"
};
function InitContainer(el, data) {
elem = $(el);
jsPlumb.addEndpoint(el, {
uuid: elem.attr("id")+"sr"
}, exampleGreyEndpointOptions);
jsPlumb.addEndpoint(el, {
uuid: elem.attr("id")+"tr",
parameters: data // store data in the drain Endpoint
}, endpointOptions);
....
}
in this function I added two endpoints to one element, each with different attributes.
The actual problem you have is that the surface of the endpoint needs to be offset from it's position so that it is within the element. This is mentioned in the API docs, but I didn't find an example yet:
http://jsplumb.org/apidocs/files/jquery-jsPlumb-1-3-16-all-js.html#Endpoint.paint
You can change the position of a anchor, not only by the documented text (like "TopCenter") But also by a array:
anchor: [0.2, 1,0,1]
Give it a try, You'll be able to position the anchor relative to it's element
I'm having a hell of a time with jsPlumb trying to create two connections from the same source anchor.
For example, in the JSFiddle below I'm trying to create two connections from the block 1 anchor to the two other blocks 2 and 3.
http://jsfiddle.net/dutchman71/TYerW/3/
For some reason it works fine in the jsPlumb example here with the green dot anchors.
http://jsplumb.org/jquery/draggableConnectorsDemo.html#
Can anyone tell my what I'm missing?
var endpointOptions = {
anchor:"BottomCenter",
maxConnections:-1,
isSource:true,
isTarget:true,
endpoint:["Dot", {radius:6}],
setDragAllowedWhenFull:true,
paintStyle:{fillStyle:"#5b9ada"},
connectorStyle : { lineWidth: 4, strokeStyle:"#5b9ada" },
connector:[ "Bezier", { curviness:1 }],
connectorOverlays:[
[ "Arrow", { width:15, length:15, location:1, id:"arrow" } ],
[ "Label", { label:"", id:"label" } ]
]
}
jsPlumb.bind("ready", function() {
jsPlumb.addEndpoint('block1', endpointOptions);
jsPlumb.addEndpoint('block2', endpointOptions);
jsPlumb.addEndpoint('block3', endpointOptions);
jsPlumb.draggable('block1');
jsPlumb.draggable('block2');
jsPlumb.draggable('block3');
});
A nice guy on Google groups helped me out on this one: the jsPlumb version I included from another sample is obsolete. If I include this one http://jsplumb.org/js/jquery.jsPlumb-1.3.16-all-min.js is works fine.
set maxconnections to a positive integer. that should do it.
and maybe you should make your endpoints bigger and give the connector lines a smallr z-index, than the enpoints, so you won't missclick on the canvas instead of the div
(the canvas blocks almost the whole div on Block 1 after a connection is established to Block 2 check it in your element inspector/firebug/etc)
Change the radius of the endPoint to endpoint
["Dot", {radius:1}],
and connectorStyle's line width to 1
connectorStyle : { lineWidth: 4, strokeStyle:"#5b9ada" }
I was looking for a solution that
displayed multiple columns of independent data
did not require a click (or focus) to show the list
had a simple interface
supported visible & hidden values (like HTML's <select>)
has color highlighting to show matches
automatically deletes character entries that are not in any of the choices
I wasn't able to find a control that met these requirements, so I created one. Here is an image of the control in use.
The code to create this control is:
$('input#scrolltest').menuoptions({
"Data": { 1:"January",2:"February",3:"March",4:"April",5:"May", 6:"June",7:"July",
8:"August",9:"September",10:"October",11:"November",12:"December" },
"onSelect": function(mo, data) {
console.log(mo, data.newVal, data.type );
},
"InitialValue": { 'val': 'December'},
"Height": 200,
"Sort": []
});
This control is documented here
The above example is part of this demo page