I'm attempting to add a vector map to a webpage using HERE Maps API for JavaScript. I've been using the style code below to render a super minimal style akin to the 4th picture from the top at this link (the one with only road and water area layers).
sources:
omv:
type: OMV
max_zoom: 17
min_display_zoom: 1
# global description of the map, in this example
# the map background color is white
scene:
background:
color: [1.000, 1.000, 1.000, 1.00]
# section contains the style information for the layers
# that are present on the map
layers:
# user defined name of the rendering layer
water_areas:
# the section defines where the rendering layer takes
# its data from source: omv is mandatory for the Vector Tile API
# layer: water specifies what vector layer is taken
# for the rendering see REST API documentation for the
# list of available layers.
data: {source: omv, layer: water}
# section defines how to render the layer
draw:
polygons:
order: 1 # z-order of the layer
color: [0.055, 0.604, 0.914, 1.00]
road:
data: {source: omv, layer: roads}
draw:
lines:
order: 2
color: [0.561, 0.561, 0.561, 1.00]
width: 15
It wasn't difficult to figure out how to add things like geoshape overlays and UI controls and panning, but the one thing I haven't been able to add successfully is road labels. (Which seems like it'd be quite easy.)
I've attempted to grab code for road label layers from other documentation examples, but it always breaks the map (leaving only my geoshapes on a white background). This may be because there's always global variable attached to the label's language or fill color, but when I attempt to bring in all the global variable settings and references, the map is still broken.
So my question is, does anyone know of a simple/foolproof way to add road labels to a HERE map with such a minimal style? I suppose I'm looking for the minimum attributes necessary to make that layer visible. Thanks!
To better way to rework (delete section/add yours) vector styles to utilize the online editor Map Style editor (it allows you see changes immediately) and after that load reworked style yaml file in your web app like:
function setStyle(map) {
// get the vector provider from the base layer
var provider = map.getBaseLayer().getProvider();
// Create the style object from the YAML configuration.
// First argument is the style path and the second is the base URL to use for
// resolving relative URLs in the style like textures, fonts.
// all referenced resources relative to the base path https://js.api.here.com/v3/3.1/styles/omv.
var style = new H.map.Style('URL/to/your.yaml',
'https://js.api.here.com/v3/3.1/styles/omv/');
// set the style on the existing layer
provider.setStyle(style);
}
See please the example on https://jsfiddle.net/qw64zL85/
There is using this yaml example file with road_labels: there only yaml text
Related
(First Question so apologies)
Bokeh 1.3.4
Situation:
I am trying top map a Bokeh MultiLine using a CDSView and all the existing examples seem to use the "figure" object which has a helper (multi_line) which accepts a view as an argument. I am doing this on top of a GMAPPlot which does not support multi_line (only MultiLine) (see below). The commented out line throws an error saying GMAPPlot does not support multi_line.
plot = GMapPlot(
x_range=Range1d(), y_range=Range1d(), map_options=map_options, sizing_mode='scale_height'
)
.
.
.
sel_sa1s = []
v_bf = [True if sa1_val in sel_sa1s else False for sa1_val in v_source.data['SA1']]
v_view = CDSView(source=v_source, filters=[BooleanFilter(v_bf)])
v_ml = MultiLine(xs="xs",ys="ys",line_color="black", line_width="w")
#v_rend = plot.multi_line(xs="xs",ys="ys",line_color="black", line_width="w", source=v_source, view=v_view)
v_rend = plot.add_glyph(v_source, v_ml, name='votes')
The snippet shown above works and maps the entire network (very crowded) because there is no filter. What I want to have happen is for the filter to be initialised to hide everything then when the user clicks on an area (SA1) it will display the network related to that SA1.
Actually I can do that but only one area at a time and it would be much more efficient to be able to load the whole map and use a filtered view to control which sub-networks are displayed.
It seems that GMAPPlot only likes the pattern:
create glyph
add glyph
So, my question is - how does one use a CDSView in this environment (how does one add it to the renderer?)
Screenshot of unfiltered data set
It seems that GMAPPlot only likes the pattern:
create glyph
add glyph
That has not been true for some time. There is a higher level bokeh.plotting.gmap function that creates and configures GMapPlot instances with deafult axes, etc, and also has all the same methods and conveniences as figure (e.g. multi_line). It will be much less work to go this route than assembling everything by hand from low-level objects.
Why does my OBJ model have has no material and display as black?
I have an OBJ:
<a-obj-model id="gorilla" src="#gorilla-obj" mtl="#gorilla-mtl"></a-obj-model>
I can see the geometry, but the material shows up as black.
If you check your MTL, you might notice it is trying to use TGA or some other sort of textures that aren't plain images. In this case, you need to include additional three.js loaders.
You could try including all the necessary loaders like including https://github.com/mrdoob/three.js/blob/dev/examples/js/loaders/TGALoader.js and THREE.Loader.Handlers.add( /\.tga$/i, new THREE.TGALoader() );
However, it might be simplest to just batch convert all the TGAs to just use images like PNGs using a converter, and replace all instances of 'tga' with 'png'.
In the atom editor I'd like to be able to create notes 'in between' the lines of a file. I'm more than happy to do this via a plugin, but I'm wondering if someone more experienced in the API can confirm whether it's even possible before I dive in.
Basically, if I open a file with 10 lines, I want to be able to 'insert' new lines between some of them (which will be saved to another file), while still maintaining the line numbering of the original file. Eg:
1 Hello
2 World
. This is a note line saved in another file 'attached' to line 2
3 Foo
4 Etc
Think along the lines of inline comments on GitHub.
You can use block decorations to inject text between two lines:
A block decoration is a special kind of decoration that allows you to insert a DOM node before or after a certain line, and have it follow the line as the buffer changes. You can see it in action by running the snippet below in the DevTools:
var element = document.createElement('div')
element.textContent = 'Block decorations! 🐲'
var editor = atom.workspace.getActiveTextEditor()
var marker = editor.markScreenPosition([0, 0])
editor.decorateMarker(marker, {type: 'block', position: 'before', item: element})
In your case, you would be injecting text rather than GIFs, but you get the idea!
i'm using JSNetworkX for graph exploration and rendering.
JSNetworkX is using D3.js for graph render. However, as I work with large graph (json file about 5Mb), I would like to render this graph directly without any animations (so, in placing each node directly without force attraction).
I try to use D3.layout.force().stop() after rendering, but it's without effects.
Because of that, I'm thinking that it has to be done in jsnx.draw, see my code below.
jsnx.draw(G, {
element: 'body',
d3: d3,
layout_attr: {
charge: -1500,
linkDistance: 1,
gravity: 1,
friction: 0.4,
alpha: -100
},
});
force = d3.layout.force();
Unfortunately, you can't do that with the current version. Do you need a force layout at all or do you already have positions for each node? FWIW, if you really have a large graph, even a static layout would be slow, because you'd still have too many SVG elements. The next version will include a WebGL rendered for large graphs.
So, we can't for the moment.
As of v0.3.4, jsnx.draw returns the force layout object so you can do var force = jsnx.draw{/*...*/} then force.stop().
Can I initialize the cropping area (In order to suggest a default one), with the Imagecrop module ?
I want my users to crop images in the same way...
thanks
Update: code lines in imagefield_crom.js
setSelect: [
parseInt($(".edit-image-crop-x", widget).val()),
parseInt($(".edit-image-crop-y", widget).val()),
parseInt($(".edit-image-crop-width", widget).val()) + parseInt($(".edit-image-crop-x", widget).val()),
300 + parseInt($(".edit-image-crop-y", widget).val())
]
Imagefield Crop uses the following jQuery plugin http://deepliquid.com/content/Jcrop_Manual.html
The function that you should be interested in is setSelect which sets the initial cropping area.
You can have a look in the file imagefield_crop.js (in the imagefield_crop module folder) where the function setSelect is being called. The default there is to set the selection area to the whole image -- you might want to recommend some other size and starting coordinates.
Alternative Answer
Check out http://drupal.org/project/imagecrop