Carafe Map Advance option or configuration

[auarstadtt]

Hi everybody,

 

I'm new to carafe but I manage tomake it working with geocoding and webviewer mapping. This tool is so great.

Do you know where to find help for advance features like :

default zoom level ?
markers different images ?

I've looked into the scripts but the html code is soo big that I can not find the specific portion ..

thank you

Antoine

 

[mkos]

Hi Antoine, 

You can set the zoom level when initializing the map object by adding a zoom property like this:

map = new google.maps.Map(document.getElementById("map"), {
    zoom: 8,
});

You can set the marker icon when initializing the marker object by adding an icon property like this:

const svgMarker = {
    path: "M10.453 14.016l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM12 2.016q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
    fillColor: "blue",
    fillOpacity: 0.6,
    strokeWeight: 0,
    rotation: 0,
    scale: 2,
    anchor: new google.maps.Point(15, 30),
};

new google.maps.Marker({
    position: map.getCenter(),
    icon: svgMarker,
    map: map,
});

You can also use the setter function to set the property after the object has been initialized. For example:

marker.setIcon(svgMarker);

Same for the zoom setting:

map.setZoom(8);

Reference: 

• Zoom: https://developers.google.com/maps/documentation/javascript/interaction#javascript
• Marker: https://developers.google.com/maps/documentation/javascript/markers#icons

[auarstadtt]

Thank you for the reply.

I managed to do that in the js code if I use a code html & js into the web viewer and not carafe. 
but I don t know where to use this code into carafe map add on ?

[mkos]

You would need to make those updates in the template.carafe file. That's where the htmls+js code lives in carafe bundles.

[auarstadtt]

Sorry for my stupid question but where is it ? In my extension folder/carafe i have a template.xml

And it's not there where the modifies can change for everybody.

thank you

[mkos]

You'll need to edit the original bundle files, in particular the template.carafe file, and then deploy the updated bundle to your solution.

Take a look at the tutorials at https://carafe.fm/tutorials/. I haven't watched them all myself, but my guess is that the following videos might be helpful: Anatomy of, Configure, Deploy, Advanced Dev parts 1 & 2.

Something to keep in mind: There are two versions of Carafe. There's the original, which is now called Carafe Kitchen. The newer one uses the newer FileMaker add-on capabilities. I think the videos were recorded with Carafe Kitchen.

[auarstadtt]

thank you

it's true I use carafe add on with other config than the videos. I already watched them.

[mkos]

You can export the bundle you're using so that you can modify it. To do this, find your bundle in the Carafe Configurator layout, go to the bundle details, and click the button to export the bundle. This will create a single json file which will include all the source code.

You can then use the Carafe Bundler utility to convert that json file into multiple individual source files (including template.carafe). Look for the "To work on an existing Bundle..." text to find the instructions for doing that.

As you make changes, you can preview them in your browser. Run npm run watch to enable that. This will also hot-reload the bundle in the browser as you make changes. This way you can see those changes take effect immediately.

To compile the source files back into a single json bundle and send it to FileMaker, update the 'sendFmpUrl' property in the package.json file, and then run npm run force-send.